淺談UI設(shè)計的七項原則

界面作為用戶與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í)靠瞎。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末比庄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子乏盐,更是在濱河造成了極大的恐慌佳窑,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件父能,死亡現(xiàn)場離奇詭異神凑,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門溉委,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鹃唯,“玉大人,你說我怎么就攤上這事瓣喊∑禄牛” “怎么了?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵藻三,是天一觀的道長洪橘。 經(jīng)常有香客問我,道長趴酣,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任坑夯,我火速辦了婚禮岖寞,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘柜蜈。我一直安慰自己仗谆,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布淑履。 她就那樣靜靜地躺著隶垮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪秘噪。 梳的紋絲不亂的頭發(fā)上狸吞,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天,我揣著相機與錄音指煎,去河邊找鬼蹋偏。 笑死,一個胖子當(dāng)著我的面吹牛至壤,可吹牛的內(nèi)容都是我干的威始。 我是一名探鬼主播,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼像街,長吁一口氣:“原來是場噩夢啊……” “哼黎棠!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起镰绎,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤脓斩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后畴栖,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體俭厚,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年驶臊,在試婚紗的時候發(fā)現(xiàn)自己被綠了挪挤。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叼丑。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖扛门,靈堂內(nèi)的尸體忽然破棺而出鸠信,到底是詐尸還是另有隱情,我是刑警寧澤论寨,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布星立,位于F島的核電站,受9級特大地震影響葬凳,放射性物質(zhì)發(fā)生泄漏绰垂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一火焰、第九天 我趴在偏房一處隱蔽的房頂上張望劲装。 院中可真熱鬧,春花似錦昌简、人聲如沸占业。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谦疾。三九已至,卻和暖如春犬金,著一層夾襖步出監(jiān)牢的瞬間念恍,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工晚顷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留樊诺,地道東北人。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓音同,卻偏偏與公主長得像词爬,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子权均,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351

推薦閱讀更多精彩內(nèi)容