雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務 案例
首頁 案例 服務 關(guān)于 face+

ui設計語言運用法則,讓你的設計更完美

Time: 2020-01-19

UI設計所涉及到的內(nèi)容是非常多的,其中還包括了語言的運用,這就讓許多新手設計師頭疼不已了,因為語言的運用太難了,下面我們跟隨小編一起來了解一下ui設計語言的相關(guān)資料吧。


ui設計語言運用法則

法則一、語言使用的準確性

  如果用戶無法準確理解ui設計中的信息,那么用戶后續(xù)的操作就會出現(xiàn)相應的阻礙,會降低用戶的操作效率。這也就要求設計師在使用語言時一定要準確,盡可能不要產(chǎn)生歧義,不要讓用戶產(chǎn)生過多的思考。

  法則二、語言使用的通俗性

  有的設計師認為語言專業(yè)能夠提升ui設計的質(zhì)量和等級,然而并非如此。我們的軟件是給廣大用戶使用的,而不是給專業(yè)技術(shù)人員使用的。盡量不要使用專業(yè)術(shù)語,因為大部分用戶根本不理解語言的意思。

  法則三、語言使用的一致性

  在具體的表述方面,ui設計師也需要注意同一事物的說明要使用同一個詞語,否則會給用戶造成不必要的困擾。例如,如果你使用了“查找”,就不要在同樣的情況下使用“搜索”,這樣更有利于用戶的理解。

  法則四、語言體現(xiàn)情感關(guān)懷

  用戶對于語言是比較敏感的,因此我們盡量不要使用“警告”“禁止”等不友好的語言,可以使用“溫馨提示”“請勿”以及一些比較時尚的網(wǎng)絡用語??傊?,語言上的使用,要給用戶親切、友好、輕松的感受。


1.jpg

(圖片來自網(wǎng)絡)


  ui設計語言構(gòu)建元素

  1、顏色:無論UI還是平面,顏色是視覺傳達的最核心也是最基本的語言,不同的主色,會給人不同的視覺感受,同樣的主色不同的配色,視覺感受也會不同。在設計中確定好主色后,配色的選擇也較為關(guān)鍵。ui界面設計中除了背景色、字體顏色、圖標以外,后期上傳的產(chǎn)品圖以及輪播圖都要規(guī)范。

  2、字體:字體的設定包括字號、字重、行距、顏色對比以及界面間距留白的協(xié)調(diào)性。Material Design對字體標題和內(nèi)容文字的大小剛好是1.6倍,接近黃金比例,所以字體的處理也要有所考究。構(gòu)建文字在界面美觀和基調(diào)同時,更要注重用戶可讀性,分清主次關(guān)系。字體種類在界面中應存在一種或者兩種,不可出現(xiàn)三種字體。字號和字顏色避免過于接近,導致無法分清關(guān)系。正文行間距一般為字號的1.5~1.8倍之間。

  3、形狀:形狀的使用在界面設計中也最為常見,最多的就是直角和圓角,以及帶有品牌元素的形狀。不同的形狀傳達的情緒也不同,比如說尖銳的和弧度的,包括圓角大小不同視覺感也不同。根據(jù)重復原則,如果某個形狀在界面中重復使用時很容易加深用戶對于產(chǎn)品的印象,就像很多設計師設計icon時結(jié)合產(chǎn)品特性以及l(fā)ogo的設計基因相結(jié)合。


2.jpg

(圖片來自網(wǎng)絡)


  4、圖標:接著上面形狀的理解,圖標的風格設計也要和界面的其他設計元素應保持統(tǒng)一的設計語言,實現(xiàn)產(chǎn)品界面中所有視覺設計的一致性。圖標設計構(gòu)成通過形狀、邊框、顏色、圓角、大小、肌理等來延續(xù)傳達在界面的基調(diào)和品牌基因。

  5、網(wǎng)格:網(wǎng)格系統(tǒng)目前比較成熟的設計布局工具,設計中使用一套規(guī)范的間距,來保持產(chǎn)品的一致性,網(wǎng)格間距以倍數(shù)方式,比如1X,2X,3X,4X。比如現(xiàn)需設計一個讓用戶感受到輕松愉悅的頁面,可以使用較大的柵格間距比例,以12為基準,比如間距一律使用12,24,36,48。如果是信息較為緊密的,則可以使用8的倍數(shù),如8,16,24,32等。不同的界面信息承載使用網(wǎng)格也不同,界面空間留白不同,界面風格也會不同。比如:Airbnb界面邊距48px,整體產(chǎn)品調(diào)性簡約大氣;馬蜂窩的界面,側(cè)重于突出圖片,因此頁面內(nèi)容區(qū)域比例會比較大。

  6、圖片比例:對于圖片比例,設計師有的往往憑感覺設定,但最好合理的使用圖片規(guī)范,常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618這些比例經(jīng)過前輩驗證也是做合適視覺尺寸。


  其實ui設計語言雖然看起來比較復雜,但是只要掌握了它的應用法則,相信你也可以在ui設計時隨心所欲的運用語言,讓你的設計更完美哦!


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務 | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開