第4章

UI控件設計案例學AIGC+PhotoshopUI設計目錄CONTENT4.1行業(yè)知識：控件設計基礎4.2實戰(zhàn)案例：設計滑塊4.3實戰(zhàn)案例：設計表單4.4實戰(zhàn)案例：設計按鈕4.5拓展訓練4.6AI輔助設計滑塊通常由滑動軌跡、滑動條和滑動塊3部分組成?；瑒榆壽E是滑塊移動的路徑，定義了滑塊可以移動的范圍和方向，滑動軌跡可以是直線、曲線或其他形狀，具體取決于設計需求和用戶交互場景?；瑒訔l是一個可選的組件，通常與滑動軌跡結(jié)合使用，用于顯示滑動塊當前的位置和狀態(tài)，滑動條上可能標有刻度或數(shù)值，以便用戶更準確地了解滑動塊的位置和對應的結(jié)果。滑動塊是用戶可以直接操作的部分，通常是一個可移動的圖形元素，如圓形、方形或條形，且采用高辨識度的顏色，以便用戶清晰識別。4.1.1滑塊的類型及設計要點1.滑塊構(gòu)成4.1.1滑塊的類型及設計要點2.滑塊類型線條滑塊以線條為主體設計。這類滑塊設計簡潔，可分為有刻度和無刻度兩種樣式。在設計線條滑塊時，需特別注意色彩和滑動塊大小，確?；瑒咏Y(jié)果的清晰易讀和滑動操作的便捷性。線條滑塊旋轉(zhuǎn)滑塊主要以旋轉(zhuǎn)動作為其核心設計元素。這類滑塊形式多樣，具有較強的視覺沖擊力，其直觀且精美的設計能夠為用戶帶來新穎獨特的體驗。旋轉(zhuǎn)滑塊線條滑塊旋轉(zhuǎn)滑塊易用性可視性直觀性美觀性適應性設計滑塊時，應確保滑動塊的大小適中，不要太大或太小，以便用戶能夠輕松地觸摸和移動。并且需提供足夠的滑動范圍，使用戶可以輕松地調(diào)整到所需的值。在設計時可使用高對比度的顏色來區(qū)分滑動塊和滑動槽，以提高可視性。在必要時，還可通過刻度、標簽或數(shù)字來指示滑塊的具體位置或值。滑動條的方向應與調(diào)整的屬性、用戶習慣相符合，如調(diào)整音量滑塊，則從左到右應表示音量的增加?；瑒訅K的形狀應直觀簡潔，避免使用過于復雜或抽象的設計?；瑒訅K和滑動槽的設計應與整體的用戶界面風格相協(xié)調(diào)，且視覺效果美觀?；瑝K應考慮不同設備和屏幕尺寸的適應性，確保在各種情況下都能提供良好的用戶體驗。4.1.1滑塊的類型及設計要點3.滑塊設計要點4.1.2表單的類型及設計要點注冊表單調(diào)查表單預約表單邏輯清晰表單是用于與用戶溝通的工具，應以邏輯清晰的方式引導用戶完成填寫。盡量使用單列設計多列表單容易讓用戶漏填信息；而單列表單填寫路徑直接，效率更高。減少輸入簡短的表單能更快加載，且用戶完成填寫的意愿更高。在設計時，應盡量減少非必要的輸入內(nèi)容。提供合適的輸入方式針對如賬號、密碼、郵箱等輸入內(nèi)容，應提供相應的鍵盤類型，以減少輸入錯誤，幫助用戶快速完成填寫。4.1.3按鈕的類型及設計要點05文字按鈕文字按鈕將文字轉(zhuǎn)化為可點擊的鏈接或按鈕，使用戶能夠通過簡單的文字交互完成操作。這類按鈕的設計應確保與產(chǎn)品的整體風格相匹配，并具備足夠的視覺吸引力。04邊框按鈕邊框按鈕通過在按鈕周圍繪制一層邊框來突出顯示按鈕。邊框的顏色、寬度和樣式可以根據(jù)設計需求進行調(diào)整，以達到較佳的視覺效果和用戶體驗。邊框按鈕通常與填充按鈕相對應，后者更注重按鈕內(nèi)部的填充顏色和視覺效果。03填充按鈕填充按鈕是指選擇一個鮮明的顏色（通常采用產(chǎn)品的主色調(diào)）作為按鈕的背景，以此來強調(diào)其重要性。因此，填充按鈕常被用于關鍵操作步驟或作為主按鈕使用，以吸引用戶的注意力并引導他們執(zhí)行重要的操作。02直角按鈕圓角按鈕是指邊角為直角的按鈕設計。直角具有嚴謹、力量、高端的特點，適用于金融類、奢侈品類產(chǎn)品中，給用戶嚴謹安全、高端的感覺，符合產(chǎn)品調(diào)性。01按按鈕形狀劃分類型圓角按鈕圓角按鈕是指邊角為圓角的按鈕設計。該按鈕通過平滑的曲線過渡，使按鈕看起來更加柔和、友好，減少了直角邊帶來的生硬感。圓角按鈕通常具有更好的視覺聚焦效果，能夠引導用戶的視線并提升點擊意愿。按按鈕形狀劃分類型按按鈕樣式劃分類型10準確性按鈕文案應準確描述操作結(jié)果，避免用戶誤解。這意味著文案需要清晰地傳達按鈕的作用和效果，以便用戶能夠做出正確的決策。09具體性按鈕文案應使用動詞作為開頭，明確告訴用戶點擊后將發(fā)生什么。這種具體性的描述有助于用戶預測下一步操作的結(jié)果，并增強用戶對按鈕功能的理解。08交互按鈕用于觸發(fā)特定交互或效果的按鈕，如展開菜單、切換視圖等。07輔助操作按鈕用于執(zhí)行輔助或次要操作的按鈕，如取消操作、查看更多等。06主要操作按鈕用于執(zhí)行主要或核心操作的按鈕，如提交表單、購買商品等。按按鈕功能劃分類型按按鈕特點劃分類型目錄CONTENT4.1行業(yè)知識：控件設計基礎4.2實戰(zhàn)案例：設計滑塊4.3實戰(zhàn)案例：設計表單4.4實戰(zhàn)案例：設計按鈕4.5拓展訓練4.6AI輔助設計案例背景+操作要點使用形狀工具繪制不同大小的形狀。使用文字工具輸入文字內(nèi)容。為各形狀設置不同的透明度，使整體設計具有層次感。案例背景操作要點橙子視頻App準備升級播放界面，需要重新設計播放過程中出現(xiàn)的播放控制線條滑塊和播放加載滑塊，具體要求如下。（1）滑塊設計應簡潔明了，具有美觀性，其效果不能影響視頻的正常播放。（2）分辨率為300像素/英寸，尺寸600像素×400像素。（3）分別設計播放控制線條滑塊和播放加載滑塊，并展示滑塊應用于界面中的效果。設計思路12圖形設計設計時可采用簡約的幾何圖形作為設計基礎，如圓形、環(huán)形或線形等，這些形狀易于識別和記憶，同時能夠很好地適應不同的屏幕尺寸。色彩設計選擇綠色、白色和藍色作為滑塊色彩，代表大地和天空，象征清新、自然和寧靜。播放控制線條滑塊效果播放加載滑塊效果010203044.2.1繪制播放控制線條滑塊以素材圖像作為背景，制作一個半透明的播放控制線條滑塊。制作時，可先繪制圓角矩形，作為滑動槽，然后繪制三角形、心形、音量圖標等。添加素材繪制矩形1繪制矩形2添加矩形08090506074.2.1繪制播放控制線條滑塊繪制圓輸入文字完成后的效果繪制三角形繪制與移動圓4.2.2繪制播放加載滑塊在制作播放加載滑塊時，可先繪制一個矩形，通過復制矩形并調(diào)整旋轉(zhuǎn)角度形成圓形輪廓，最后輸入加載進度文字。添加打開素材繪制矩形新建并填充顏色4.2.2繪制播放加載滑塊旋轉(zhuǎn)矩形縮小圖像復制旋轉(zhuǎn)矩形旋轉(zhuǎn)圖像設置不透明度完成后的效果目錄CONTENT4.1行業(yè)知識：控件設計基礎4.2實戰(zhàn)案例：設計滑塊4.3實戰(zhàn)案例：設計表單4.4實戰(zhàn)案例：設計按鈕4.5拓展訓練4.6AI輔助設計案例背景+操作要點使用形狀工具繪制表單形狀，使用漸變工具填充顏色。使用文字工具輸入表單內(nèi)容。使用圖層樣式和圖層混合模式增強表單的視覺效果。案例背景操作要點隨著十月黃金周的到來，某旅行公司準備更新官網(wǎng)中旅游行程表單的場景和內(nèi)容。除此之外，為了方便用戶在官網(wǎng)中能快速入住關聯(lián)酒店，準備添加內(nèi)容為入住時間和離店時間的日歷選擇器表單，具體要求如下。（1）表單效果要簡潔、美觀，具有較高的辨識度。（2）表單布局邏輯合理，層次清晰，能直觀體現(xiàn)表單內(nèi)容。（3）分辨率為72像素/英寸，旅游行程表單尺寸為1920像素×700像素，日歷選擇器表單尺寸為750像素×1334像素。設計思路13圖形設計文字設計2色彩設計在設計旅游行程表單時可采用矩形羅列表單內(nèi)容，增加識別度。而日歷選擇器表單需要能直觀展示日期信息，其效果可參考日歷進行設計，來展示入住時間和離店時間。在文字上以“思源黑體CN”為主要字體，該字體字形端正，筆畫橫平豎直，筆跡粗細一致，更加具有識別性在設計旅游行程表單時，以藍灰色和白色為主，搭配綠色，讓表單信息簡單、直白；而日歷選擇器表單則采用漸變的藍紫綠色搭配黑色的文字和綠色的按鈕，提升表單的美觀度。設計思路游行程表單日歷選擇表單4.3.1設計旅游行程表單在設計旅游行程表單時，可先使用矩形將表單內(nèi)區(qū)分為列表和行程表兩個部分，列表主要用于羅列表單的類目，而行程表則采用矩形框的形式，將國內(nèi)機票類目中的行程類型、出發(fā)城市、到達城市、出發(fā)日期等內(nèi)容進行羅列，方便用戶識別信息。繪制矩形繪制其他矩形4.3.1設計旅游行程表單輸入文字繪制圓角矩形并輸入文字繪制圓4.3.1設計旅游行程表單查看完成后的效果4.3.2設計日歷選擇表單繪制日歷選擇器表單時，可先繪制背景，在上方添加店鋪的入住時間和離店時間，在中間區(qū)域主要添加日歷內(nèi)容，方便用戶選擇日期。添加漸變顏色繪制圓角矩形設置描邊參數(shù)設置投影參數(shù)010203044.3.2設計日歷選擇表單完成后的效果繪制直線輸入文字完成后的效果繪制矩形并調(diào)整顏色繪制按鈕050607100908目錄CONTENT4.1行業(yè)知識：控件設計基礎4.2實戰(zhàn)案例：設計滑塊4.3實戰(zhàn)案例：設計表單4.4實戰(zhàn)案例：設計按鈕4.5拓展訓練4.6AI輔助設計案例背景+操作要點使用圖層樣式增加圖形的立體感。使用“高斯模糊”濾鏡制作圖形的模糊效果。使用圖層蒙版制作豐富的文字效果。使用畫筆工具繪制按鈕的高光部分。案例背景操作要點陽光幼兒園近期準備在入園App中添加播放板塊，需要設計其中的點擊進入、播放和暫停按鈕，具體要求如下。（1）按鈕要簡潔、美觀，能讓用戶直觀、快速地了解按鈕功能。（2）按鈕的色彩要符合兒童的審美需求。（3）圖標分辨率為300像素/英寸，尺寸為600像素×600像素。設計思路13圖形設計文字設計2色彩設計按鈕采用立體風格，以白色豎條代表“播放”，以三角形表示“暫?！薄榱速N近幼兒園的定位，在形狀上可采用帶弧度的圖形，更加柔和、美觀。而“點擊進入”按鈕則繼續(xù)采用立體風格展示文字和按鈕形狀，并添加高光部分，增強立體感。以“方正蘭亭特黑_GBK”為主要字體，該字體筆畫較粗、簡潔、直觀，方便識別。按鈕以淺藍色為主，展現(xiàn)出清新寧靜的氛圍。“播放”“暫?！卑粹o使用深藍色的邊框為按鈕增加立體感，同時與淺藍色背景形成對比，提升了視覺效果。而“點擊進入”按鈕中使用黃色系邊框，讓整個按鈕更具有識別性，以增加吸引力。設計思路播放按鈕點擊進入按鈕暫停按鈕4.4.1設計播放和暫停按鈕在播放和暫停按鈕時，可先繪制圓形，通過為圓形添加圖層樣式使其形成立體效果，然后繪制代表播放和暫停的圖形，使其形成完整的按鈕樣式。繪制圓弧復制并編輯圓繪制圓1設置斜面和浮雕010203044.4.1設計播放和暫停按鈕繪制圓2設置內(nèi)陰影參數(shù)設置投影參數(shù)0506074.4.1設計播放和暫停按鈕08091011添加圖層樣式創(chuàng)建蒙版繪制圓角矩形設置斜面和浮雕4.4.1設計播放和暫停按鈕12131415設置投影參數(shù)查看效果播放按鈕效果暫停按鈕效果4.4.2繪制點擊進入按鈕點擊進入按鈕在設計時可先繪制圓角矩形，然后通過添加圖層樣式的方式增加立體感，最后輸入文字并繪制高光部分，提高按鈕的美觀度和識別性。設置內(nèi)陰影參數(shù)繪制圓角矩形設置投影參數(shù)0102034.4.2繪制點擊進入按鈕設置內(nèi)陰影參數(shù)查看添加后的效果查看完成后的效果0405064.4.2繪制點擊進入按鈕07080910添加圖層蒙版繪制圓角矩形添加高斯模糊繪制矩形4.4.2繪制點擊進入按鈕11121314添加圖層蒙版復制矩形繪制高光為文字添加內(nèi)陰影目錄CONTENT4.1行業(yè)知識：控件設計基礎4.2實戰(zhàn)案例：設計滑塊4.3實戰(zhàn)案例：設計表單4.4實戰(zhàn)案例：設計按鈕4.5拓展訓練4.6AI輔助設計實訓1設計開關滑塊實訓要求:某App需要設計開關滑塊，方便后期使用。以白天和黑夜分別作為“開”“關”狀態(tài)的設計點，滑塊尺寸為800像素×800像素。圖形簡潔、具象，以太陽圖形代表白天，以月亮圖形代表黑夜。使用藍色為主色，以淺藍色代表白天，以深藍色表示黑夜，確保整體視覺效果的和諧與統(tǒng)一。實訓1設計開關滑塊操作思路:開關滑塊設計過程實訓2設計點擊參與按鈕實訓要求:某外賣App近期為了提高用戶的黏性，準備開展一個活動，需要設計點擊參與按鈕，要求按鈕采用立體的方式展現(xiàn)，整體效果簡潔、直觀。按鈕尺寸為600像素×600像素，按鈕顏色為紫色系，可用無彩色進行裝飾。實訓2設計點擊參與按鈕操作思路:點擊參與按鈕設計過程目錄CONTENT4.1行業(yè)知識：控件設計基礎4.2實戰(zhàn)案例：設計滑塊4.3實戰(zhàn)案例：設計表單4.4實戰(zhàn)案例：設計按鈕4.5拓展訓練4.6AI輔助設計VegaAI生成預約表單VegaAI是一款強大的在線AI插畫平臺，提供文生圖、圖生圖等多種繪畫模式，能有效簡化設計流程，并生成高質(zhì)量圖像。VegaAI還支持快速訓練和自由定制，提供視頻生成功能，有助力設計人員高效創(chuàng)作。例如，使用VegaAI生成生成預約表單，用戶可在生成的表單中選擇合適的表單效果。Midjourney中文站生成音量調(diào)節(jié)按鈕NJ6.0（動漫質(zhì)感）專注于動漫風格的模式，在該模式下生成的動漫風格圖像不僅具有鮮明的動漫風格，還注重圖像的質(zhì)量和細節(jié)表現(xiàn)。MJ6.0（真實質(zhì)感）強調(diào)真實質(zhì)感的表現(xiàn)，在該模式下生成的圖像會注重真實世界中的質(zhì)感表現(xiàn)，如光影、材質(zhì)等，使得作品看起來更加真實和立體。MJ6.1（細節(jié)紋理）強調(diào)細節(jié)紋理的表現(xiàn)，在該模式下生成的圖像會注重細節(jié)內(nèi)容，使得作品看起來更加真實。MJ5.2（真實細節(jié)）強調(diào)真實細節(jié)的表現(xiàn)，注重真實世界中的細節(jié)和紋理，使得圖像看起來更加逼真和生動。N