UI設(shè)計需要了解的十大準(zhǔn)則
UI設(shè)計需要了解的十大準(zhǔn)則
格式化內(nèi)容
創(chuàng)建屏幕布局的時候，應(yīng)該適適配iOS設(shè)備屏幕。用戶應(yīng)該一次看清主要內(nèi)容，而無需縮放或水平滾動觸摸控制盡量采用專門為觸摸和手勢設(shè)計的界面元素，這樣可以使應(yīng)用程序的交互更加輕松自然。
命中目標(biāo)
設(shè)計可觸控的控件的時候，尺寸不得小于44x44px，只有這樣才能確保觸摸的精度和命中率。
字體尺寸
文本中的文字尺寸不得小于11點(diǎn)，這樣才能確保在常規(guī)距離下，無需縮放就可以清晰地閱讀。
對比度控制
盡量確保文字色彩對比更明顯，并且調(diào)整文字與背景的對比提高可讀性。
間距調(diào)整
不要讓文字出現(xiàn)重疊的狀況。適當(dāng)?shù)卦黾有懈吆托虚g距，提高文字的易讀性。
高分辨率
為所有圖片資源提供高分辨率的版本。那些未曾@2x的圖像在Retina屏幕上會出現(xiàn)模糊的狀況。
防止拉伸
始終控制好圖片的高寬比，可以縮放，但是一定要避免拉伸，這樣可以避免失真。
信息架構(gòu)
創(chuàng)建易于閱讀易于調(diào)整的布局，確保界面內(nèi)容的可調(diào)整性。
保持對齊
讓文本圖片按鈕在界面上保持對齊，相似相關(guān)內(nèi)容合理靠近，讓用戶更容易理解界面信息。
簡易性
界面的簡潔是要讓用戶便于使用、便于了解、并能減少用戶發(fā)生錯誤選擇的可能性。
用戶語言
界面中要使用能反應(yīng)用戶本身的語言，而不是游戲設(shè)計者的語言。
記憶負(fù)擔(dān)最小化
人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶極不穩(wěn)定、有限，24小時內(nèi)存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。
一致性
是每一個優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與游戲內(nèi)容相一致。
清楚
在視覺效果上便于理解和使用。
用戶的熟悉程度
用戶可通過已掌握的知識來使用界面，但不應(yīng)超出一般常識。
從用戶習(xí)慣考慮
想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實(shí)與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。
排列
一個有序的界面能讓用戶輕松的使用。
安全性
用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。
靈活性
簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。
人性化
高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。
UI設(shè)計之設(shè)計原則
做什么都有原則，當(dāng)然UI設(shè)計也有它的原則。
1.簡易性
界面的簡潔是要讓用戶便于使用、便于了解產(chǎn)品，并能減少用戶發(fā)生錯誤選擇的可能性。
2.用戶語言
界面中要使用能反映用戶本身的語言，而不是游戲設(shè)計者的語言。
3.記憶負(fù)擔(dān)最小化
人腦不是電腦，在設(shè)計界面時必須要考慮人類大腦處理信息的限度。人類的短期記憶有限且極不穩(wěn)定，24小時內(nèi)存在約25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。
4.一致性
它是每一個優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與產(chǎn)品內(nèi)容相一致。
5.清楚
在視覺效果上便于理解和使用。
6.用戶的熟悉程度
用戶可通過已掌握的知識來使用界面，但不應(yīng)超出一般常識。
7.從用戶習(xí)慣考慮
想用戶所想，做用戶所做。用戶總是按照他們自己的方法理解和使用。
通過比較兩個不同世界(真實(shí)與虛擬)的事物，完成更好的設(shè)計。如：書籍對比竹簡。
8.排列
一個有序的界面 能讓用戶輕松的使用。
9.安全性
用戶能自由的作出選擇，且所有選擇都是可逆的。在用戶作出危險的選擇時有信息介入系統(tǒng)的提示。
10.靈活性
簡單來說就是要讓用戶方便的使用，但不同于上述。即互動多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤或手柄、界面)。
11.人性化
高效率和用戶滿意度是人性化的體現(xiàn)。應(yīng)具備專家級和初級玩家系統(tǒng)，即用戶可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。
UI設(shè)計中的色彩運(yùn)用研究
1 UI設(shè)計中色彩的功能
色彩作為視覺傳達(dá)中非常重要的要素在UI設(shè)計中具有非常重要的作用，可以歸納為以下幾個方面。
1）顯示界面的整體架構(gòu)
一個UI界面總是借助圖形化的外觀直接作用于客戶的視覺系統(tǒng)。用戶接觸一個UI界面，看到的往往是一個由底色、其他幾何色塊、圖標(biāo)、按鈕等元素構(gòu)成的圖形符號系統(tǒng)。用色彩可以非常直觀的凸顯出背景、導(dǎo)航欄、狀態(tài)欄，按鈕等構(gòu)成元素，并顯示出UI界面的邏輯架構(gòu)。
2）明確視覺層級關(guān)系
UI設(shè)計中不同的內(nèi)容屬于不同的層級關(guān)系，如菜單于菜單間的同級關(guān)系、內(nèi)容間的從屬關(guān)系等等。用同色系色彩、不同色相色彩間的差距可以非常直觀地區(qū)分內(nèi)容的層級關(guān)系，還可以通過色彩間的強(qiáng)對比突出關(guān)鍵內(nèi)容。
3）營造界面整體風(fēng)格
UI界面雖然是個復(fù)雜的視覺圖形系統(tǒng)，但通過主色調(diào)、輔助色、裝飾色之間的對比調(diào)和關(guān)系會呈現(xiàn)出明顯的風(fēng)格傾向。用不同的色系或者同色系色彩之間的對比與調(diào)和關(guān)系，可以塑造出不同的界面風(fēng)格。如適合男生的金屬質(zhì)感的黑色、灰色、藍(lán)色系，女生喜歡的夢幻甜美色系、糖果色系。界面風(fēng)格定位于品質(zhì)已經(jīng)成為用戶體驗(yàn)中最重要的部分之一。
2 UI色彩設(shè)計方案
在進(jìn)行UI設(shè)計時，要通過對產(chǎn)品及用戶體驗(yàn)的分析確定明確的色彩搭配反感，形成“標(biāo)準(zhǔn)色彩規(guī)范”，在這個基礎(chǔ)上再進(jìn)行具體界面、線框、圖標(biāo)等細(xì)節(jié)設(shè)計。標(biāo)準(zhǔn)色彩規(guī)范中要規(guī)定出最主要主色、輔助色、裝飾色的色號，方便設(shè)計師的設(shè)計稿的色彩統(tǒng)一。
1）主色調(diào)
主色用量基本占據(jù)全部用色的75%，基本決定了整個界面的視覺風(fēng)格。主色選擇要符合產(chǎn)品本身的氣質(zhì)、訴求和色彩心理學(xué)規(guī)律，可在主色的基礎(chǔ)上通過明度與純度的變化衍生出同色系色調(diào)作為主色調(diào)范圍。
根據(jù)色彩在視覺中的能量值，一般主色傾向于選擇飽和度高、明度低的色彩，往往會在在同一界面中占據(jù)較大的面積或明顯的凸現(xiàn)于背景。
2）輔助色
輔助色起到輔助主色的作用，在全部用色中約占據(jù)20%。用與主色同色系色彩作為輔助色可以呈現(xiàn)柔和、整體、統(tǒng)一的視覺效果；而用主色鄰近色作為輔助色可以讓界面有豐富的變化，產(chǎn)生活潑感；用主色調(diào)對比色作為輔助色可以讓主色更為突出。
3）裝飾色
占全部色彩方案的5%的裝飾色起到點(diǎn)綴、提醒的作用。并界面增加個性化、富于趣味的視覺元素。裝飾色要與界面整體色調(diào)相區(qū)別，一般在明度、飽和度上要有明顯差異，一般會用明度或飽和度高的顏色。
微信公眾號
微信交流號