界面作為用戶與APP交互的唯一接口冯袍,對用戶的情緒和工作效率起著舉足輕重的作用。因此需對用戶界面設(shè)計一般原則進(jìn)行探討。
那么要想成為一個優(yōu)秀的ui設(shè)計師,就必須要知道UI設(shè)計的基本原則是有哪些呢胧辽?
[if !supportLists]1.?[endif]產(chǎn)品思維要貫穿
多看需求產(chǎn)品流程圖峻仇,在交互結(jié)構(gòu)圖中公黑,可以根據(jù)需求初步構(gòu)造頁面的布局排版,梳理頁面的主次,在腦海中留下初步的風(fēng)格構(gòu)想凡蚜,為整個項目打下一個埋點人断,為將來設(shè)計創(chuàng)作時找參考靈感打好基礎(chǔ)。詳細(xì)地分析需求朝蜘,能讓設(shè)計師更好的把握產(chǎn)品的思路恶迈。
2、界面元素的一致性谱醇。
如果界面元素缺乏一致性暇仲,很可能使界面看起來雜亂無章、沒有條理副渴,甚至可能引起用戶對產(chǎn)品可靠性的懷疑奈附,失去對產(chǎn)品的信心,所以一致的外觀可以讓產(chǎn)品產(chǎn)生一種和諧性和專業(yè)性煮剧。無論是按鈕的圓角比例斥滤,還是圖標(biāo)的統(tǒng)一性,以及統(tǒng)一的圖形元素勉盅,都可以來提升界面的統(tǒng)一感佑颇。
3、顏色風(fēng)格草娜,頁面色相挑胸,彩度,明度整體統(tǒng)一性驱还。
顏色往往是人感官中留下的第一印象嗜暴,想要合理的運用顏色,其實并不容易议蟆。跟傳統(tǒng)的空間設(shè)計一樣闷沥,在大部分界面設(shè)計中,一般使用三種顏色就夠了咐容,除非設(shè)計師擁有者非常高的配色駕馭能力舆逃,不其然整個頁面都會顯得較為花哨,影響信息傳遞戳粒。在界面上合理地使用顏色可以增加視覺上的感染力路狮,但濫用顏色會適得其反。一般而言蔚约,亮色容易使人興奮奄妨,同時也容易使人的眼睛產(chǎn)生疲勞;柔和的暗色可以使人平靜苹祟。
4砸抛、選用字體的
文字是傳達(dá)信息的工具评雌,有文字就有字體。因此字體也是影響用戶界面質(zhì)量的重要因素直焙。我們要選取在不同的分辨率和不同類型的屏幕上都能順利閱讀的字體景东。因此對UI設(shè)計師而言,理解字體也是非常有必要的奔誓,這里提供給大家選擇字體的技巧斤吐。
1、合理的選擇字體樣式
在做界面設(shè)計時厨喂,永遠(yuǎn)要把內(nèi)容的可讀性放在首位和措,其次再去考慮其它。根據(jù)不同的業(yè)務(wù)模式蜕煌,選擇不同的字體臼婆,如襯線字與無襯線字,所傳遞出來的感受也是有著較大區(qū)別的幌绍,一般而言颁褂,需要強調(diào)的文字或者小篇文字中,使用無襯線字會更合適一些傀广。而在一些長篇文章中颁独,使用襯線體則會更容易閱讀。
2伪冰、合理的選擇字體的粗細(xì)(字重)
在單色環(huán)境中誓酒,使用不同的字重能更好的加強內(nèi)容之間的呼應(yīng)對比。在界面設(shè)計中贮聂,使用較粗的字重來作為標(biāo)題是較為合適的靠柑。因此大家在設(shè)計界面中,不妨把一些主標(biāo)題加粗試試吓懈,或許有一些意想不到的效果歼冰。
技巧三:合理的控制字距
字距跟行距會直接影響到大段文字的閱讀性。標(biāo)題的字間距要緊密耻警,正文大段文字的字間距要稀疏一些隔嫡。另外正文的行間距常規(guī)情況下可以設(shè)置為字體大小的1.2倍到1.5倍之間。在設(shè)計過程大家根據(jù)實際情況合理嘗試甘穿,直到信息較容易識別閱讀為止腮恩。另外,字體的一致性也很重要温兼,在大多數(shù)情況下秸滴,不應(yīng)當(dāng)采用兩種以上的字體。
5募判、理解尊重交互邏輯荡含,界面交互風(fēng)格應(yīng)保持一致吝羞。
在視覺設(shè)計時,設(shè)計師應(yīng)該跳出自己的思維怪圈内颗,不是只想著把頁面做好看就可以了,把頁面做得好看是我們的基本責(zé)任敦腔,把頁面做得好看又好用才是最終目標(biāo)均澳。所以我們設(shè)計師應(yīng)該多學(xué)習(xí)交互邏輯和熟悉產(chǎn)品思路,這樣做出來的作品才是有靈魂的符衔。
在設(shè)計過程中使用一致的術(shù)語找前、一致的步驟、一致的動作判族,讓用戶始終用同一種方式思考與操作躺盛。最忌諱每換一個屏幕就更換一套操作命令與操作方法。
6形帮、把握頁面節(jié)奏
音樂節(jié)奏會帶動人的心情高低起伏槽惫,那么什么是頁面的節(jié)奏呢?辩撑。頁面節(jié)奏常規(guī)是指的就是在同一個頁面內(nèi)容中界斜,間距的樣式不要太多,另外間距盡量使用倍數(shù)合冀。我們說頁面的節(jié)奏是指我們頁面布局怎么去分割各薇,給予用戶什么樣的視覺體驗,讓用戶第一眼看到什么君躺,第二眼知道有什么峭判,第三眼發(fā)現(xiàn)什么,都是我們視覺思路明確帶著用戶去體驗的棕叫。
設(shè)計過程中合理使用空白區(qū)域林螃。當(dāng)然此處的“白”并非指白色,而是指界面中沒有被界面元素占用的空白區(qū)域俺泣。恰當(dāng)?shù)亍傲舭住庇兄谕怀鼋缑嬖睾透纳瓶捎眯灾涡龑?dǎo)用戶在不知不覺中進(jìn)入系統(tǒng)的思維框架,從而順利地砌滞、正確地應(yīng)用這個系統(tǒng)侮邀。
7、規(guī)范細(xì)化
規(guī)范對于我們設(shè)計的核心就是靈魂贝润,視覺上游對接產(chǎn)品經(jīng)理绊茧,下游對接開發(fā)人員,它都起到闡述設(shè)計的規(guī)范化打掘、統(tǒng)一化华畏,讓外人可以快速讀懂我們設(shè)計鹏秋。
規(guī)范細(xì)化在交接工作中也會起到高效率的溝通對接橋梁,所以在設(shè)計好頁面時我們應(yīng)該細(xì)化地整理輸出一份設(shè)計規(guī)范亡笑,規(guī)定「標(biāo)題」「副標(biāo)題」「正文」等一系列共同使用的組件的大小侣夷、狀態(tài)、間距都是有共通性仑乌,邏輯性的百拓,這樣開發(fā)在實現(xiàn)頁面中就會有依據(jù),知道注意哪些點的字號用多少晰甚,間距是多少等等衙传,后期驗收工作也會減少很多勞動力。同時在我們設(shè)計與程序之間慢慢地建立合作默契厕九,完成以后工作任務(wù)也達(dá)到事半功倍的效果蓖捶。
最后,設(shè)計沒有什么捷徑扁远,有的只是多看俊鱼、多想、多做畅买,邏輯明確了亭引,思路清晰了,累積多了皮获,項目方案就好解決了焙蚓。UI設(shè)計與其他視覺的區(qū)分就是更多的考慮可玩性、使用性洒宝、耐用性购公,這些比視覺第一沖擊力還重要。提升自己的視覺設(shè)計水平雁歌,也并非一朝一夕之事宏浩,靠的也是不斷地積累,不斷學(xué)習(xí)靠瞎。