激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

UI界面優(yōu)化35個小妙招

發(fā)布時間：2024-02-28 20:52:09 瀏覽量：405次

配色黃金比例

60%+30%+10%的原則是色彩平衡的最佳比例，60%使用主色調(diào)，30%使用輔助色，10%使用點綴色…



陰影不是純黑色

在設(shè)計中常犯的錯誤是認為需要一個不透明黑色來制作陰影，陰影是根據(jù)背景色及產(chǎn)品色調(diào)來調(diào)整



僅顯示重要信息

在顯示對用戶重要的信息時避免多個步驟，它不僅看起來干凈，而且還可以節(jié)省時間并改善用戶體驗


使用卡片獲得創(chuàng)意

使用具有更多空白空間的可選卡片來幫助用戶做出明智的決定，在設(shè)計定價計劃時效果最佳


層級關(guān)系

按項目的重要性或權(quán)重的順序，排列元素之間建立視覺關(guān)系，然后為每個元素添加不同的視覺權(quán)重



圖片元素重疊

在涉及個人資料卡片時，可添加重疊元素，以增加設(shè)計的深度，并賦予其更清晰的含義


空狀態(tài)

界面會出現(xiàn)（無網(wǎng)絡(luò)空狀態(tài)），簡短一句話文字表達不夠情感化，繪制對應(yīng)狀態(tài)插畫提升用戶共鳴


圖標一致性

設(shè)計圖標時，16－24 px繪制的圖標大小不一致，缺乏細節(jié)，不成比例的“矮胖”添加底部圓即可


使用單選按鈕

當選項少于5個時，優(yōu)先使用單選按鈕，當大于7個時，下拉菜單是首選，大部分情況下無需全部展開


毛玻璃卡片

界面上方有卡片時，純色卡片會遮擋產(chǎn)品信息，為了避免這種情況可給卡片添加毛玻璃效果


善用圖表

產(chǎn)品信息為數(shù)字或者百分比時，多嘗試使用圖表展示給用戶更直觀的體驗，可視化效果更棒


添加背景元素

背景為純色比較單調(diào)時乏味時，可加入漸變色或者幾何形狀或者線條，增加高級感，使背景更飽和


區(qū)別按鈕層級

產(chǎn)品出現(xiàn)多個按鈕時使用不同按鈕顏色或樣式，以強調(diào)按鈕優(yōu)先級來創(chuàng)建層次結(jié)構(gòu)


顏色選擇

后臺系統(tǒng)圖標類顏色選擇盡可能明快輕盈，避免選擇飽和度，亮度，明度較低的顏色，看起來暗淡無光


優(yōu)先級按鈕

突出購買按鈕優(yōu)先級被用戶大力吐槽，從商家及運營角度來說，想讓用戶點擊預(yù)訂，大大提高轉(zhuǎn)化率


文字識別度

圖片較為復(fù)雜時，文案信息可讀性較弱，可嘗試給文案添加底色是個很好的選擇


卡片間距留白

文案較多時盡可能的留白分組給卡片保留喘息空間，主次分明、更具易讀性、辨識度


視覺對齊

根據(jù)米勒-萊爾錯覺原理，應(yīng)視覺對齊來測定設(shè)計圖，當碰到字母ACOQSTCW時，更應(yīng)該注意對齊


優(yōu)先使用按鈕

不要總是只依賴圖標，可以使用文本標簽應(yīng)放在頁面比較顯眼的位置


選擇合適字體

設(shè)計中處理文本時，選擇正確的字體將影響你的文本所有的調(diào)性，柔和，友好或正式嚴肅或有趣


橢圓矩形/超橢圓

APP金剛區(qū)作為主要功能入口，橢圓矩形效果更好，比圓角矩形更圓潤，又沒有圓形那么圓，可多嘗試


減少線的使用

瀑布流信息盡可能的減少線的使用，增大間距，保持留白，也可通過面來優(yōu)化線段，達到更好的視覺效果


英文數(shù)字別用中文字體

中英文不混用一種字體，中文即中文字體，思源黑體、蘋方等，英文即英文字體Roboto SF-UI Arial等


表單分隔線/面

進行表單設(shè)計時表單分隔線框調(diào)整為面時，頁面會更簡潔舒適，版面更干凈，用戶體驗更佳


層級清晰

文案信息較多時，層級不清楚，可通過調(diào)整字號、加粗顏色等來優(yōu)化頁面，使整體版面信息分層更明了


漸變背景/元素

給背景添加漸變效果可提升設(shè)計圖質(zhì)感，適當增加不規(guī)則形狀漸變細節(jié)更高級，不會像左邊純色那么單調(diào)


卡片排版

在設(shè)計單選按鈕時，使用具有更多空白空間的可選卡片來幫助用戶做決定，在設(shè)計定價計劃時效果更佳


文本對齊

拿小紅書舉例，評論區(qū)用戶頭像位于左側(cè)，用戶名稱及內(nèi)容位于右側(cè)的這種對齊方式提升了可讀性


文本行高

使用排版時適當使用留白，文本越小，行高越大，文本越大，行高越小，提升用戶易讀性


漸變蒙版

文本信息與背景相融合時，為圖像添加一個簡單的漸變疊加，使文本更易于閱讀，可讀性較高


雙倍間距

對末元素使用雙倍間距，UI看起來會更加平衡，對頭像使用了24px的填充，并將圖標的間距加倍


雙邊框圓角半徑

使在較大的形狀上使用兩倍大的圓角半徑，頭像使用了18 px的圓角，卡片使用了36 px的圓角


給頭像添加描邊

在復(fù)雜背景上使用時，頭像往往會融入背景，為避免混合不易識別，為頭像添加白色描邊，更易區(qū)分


字體識別度

許多字體容易混淆字母形式，特別是與“i”和“L”，左邊為Arial字體，右邊為Verdana字體，可提升字體識別度


善用圖標

使用圖標有助于更輕松的連接內(nèi)容，它使界面看起來理性而豐富，吸引用戶目光，可讀性更高

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定