17個(gè)提升用戶體驗(yàn)的 UI 設(shè)計(jì)小 Tips

設(shè)計(jì)中有很多細(xì)微的東西要注意骆膝,就如UI設(shè)計(jì)中祭衩,元素的統(tǒng)一性,圖標(biāo)風(fēng)格阅签、段落的排版等等掐暮,只有能注意這些細(xì)節(jié),你的 APP UI 才算合格政钟。

下面總結(jié)了17個(gè)提升用戶體驗(yàn)的 UI 設(shè)計(jì)小技巧路克,也是我們?nèi)粘S玫降暮芑镜募记桑瑢?duì)于新手UI設(shè)計(jì)師建議一看锥涕,注意案例中「對(duì)」與「錯(cuò)」不是絕對(duì)的衷戈,僅用于參考作用。

01层坠、圖標(biāo)保持統(tǒng)一性

圖標(biāo)是UI設(shè)計(jì)里非常重要的模塊之一殖妇,最重要的一點(diǎn)是要保持風(fēng)格統(tǒng)一。

如果是填充型的圖標(biāo)破花,那么一套設(shè)計(jì)里不要出現(xiàn)線性的圖標(biāo)設(shè)計(jì)谦趣。

其次就是描邊大小的統(tǒng)一,定下了3px就要全套保持即可座每。

最后圖標(biāo)要做到識(shí)別度和差異性前鹅。

02?字體運(yùn)用保持統(tǒng)一

字體合理運(yùn)用是UI設(shè)計(jì)很重要的一點(diǎn),要么字體很不相同峭梳,要么就用一款字體舰绘。

像第一個(gè)案例蹂喻,字體字形比較接近,但是又不是一款字體捂寿,看久了會(huì)非常突兀口四。

其次就是要突出主視覺(jué)文案的時(shí)候,要盡量把輔助字體縮小秦陋,形成對(duì)比蔓彩。

03?風(fēng)格保持統(tǒng)一性

目前最流行的兩種設(shè)計(jì)方式,第一:扁平化 第二:卡片式驳概。

卡片式最有意思的就是運(yùn)用投影來(lái)模擬現(xiàn)實(shí)的距離感和層級(jí)赤嚼。

如果選用卡片式的設(shè)計(jì)方式,那么全局盡量都要運(yùn)用上投影效果顺又,不要一塊卡片更卒,一塊扁平,風(fēng)格保持統(tǒng)一很關(guān)鍵稚照。

04?投影的合理運(yùn)用

投影選用的顏色正確和錯(cuò)誤逞壁,直接拉低作品的質(zhì)量。

在工作中锐锣,按鈕等控件使用投影盡量用吸取工具,把主色調(diào)提取出來(lái)绳瘟,把明度壓低一些雕憔,總這要保持同色系的投影,這樣才會(huì)符合視覺(jué)邏輯糖声。

其次斤彼,如果按鈕上有文字,文字盡量不要純白蘸泻,記得帶一些同色系的淡淡顏色琉苇。

05?圖片類(lèi)APP排版突破

規(guī)則是死的,人是活的悦施。

很多時(shí)候并扇,如果需求是比較寬且走文藝氣息的時(shí)候,要嘗試突破原則抡诞,用一些另類(lèi)的排版方式穷蛹,其實(shí)也是做好設(shè)計(jì)的本質(zhì)。

在圖片類(lèi)app中昼汗,錯(cuò)落一些的排版會(huì)使你的作品更有魅力肴熏。

06?適當(dāng)留白

好的設(shè)計(jì),是在最少的元素下還能第一時(shí)間突出重點(diǎn)信息顷窒。

極簡(jiǎn)是一種趨勢(shì)蛙吏,你要減少不必要的元素,或者簡(jiǎn)化元素。

不要想著把畫(huà)面撐滿就是好的設(shè)計(jì)鸦做,有時(shí)候励烦,適當(dāng)?shù)牧舭祝瑫?huì)給用戶呼吸的空間更重要馁龟。

07?正確使用文案

如果經(jīng)常用第一種方式給客戶看稿件崩侠,那么你很難通過(guò)。

做方案時(shí)坷檩,文案符合標(biāo)題或者產(chǎn)品主旨才行却音,其次就是上下間距一般是20-28,一般用24就夠。

千萬(wàn)不要全部放無(wú)關(guān)的文案矢炼,很拉低你的設(shè)計(jì)水準(zhǔn)系瓢。

08?輔助文字的運(yùn)用

輔助文字的合理運(yùn)用,也是提升質(zhì)感和視覺(jué)的關(guān)鍵點(diǎn)句灌。

如果有一個(gè)或者多個(gè)主要的視覺(jué)要素夷陋,那么輔助的文字大小盡量比主視覺(jué)要小,顏色要比主視覺(jué)淺胰锌。

比如主文字字號(hào) 24px骗绕,輔助視覺(jué)就要14-18左右即可。

09?輔助線段的作用

線段的作用资昧,主要是區(qū)分信息層級(jí)酬土。

所以輔助線段一般采取淺色調(diào)處理,千萬(wàn)不要過(guò)重會(huì)顯得很臟格带,拉低整體質(zhì)感撤缴。

10?引導(dǎo)頁(yè)風(fēng)格統(tǒng)一

引導(dǎo)頁(yè)的作用,是引導(dǎo)用戶如何使用產(chǎn)品或者提醒更新內(nèi)容叽唱。

不能為了設(shè)計(jì)而設(shè)計(jì)屈呕,要把握住主題,針對(duì)主題進(jìn)行圖標(biāo)等元素設(shè)計(jì)棺亭;

比如新增查閱文件夾功能虎眨,那么就要根據(jù)文件夾,放大鏡等元素進(jìn)行設(shè)計(jì)侦铜。

如果用一個(gè)掃描儀的元素肯定是錯(cuò)誤的了专甩。

其次就是風(fēng)格的統(tǒng)一,如果都是圖標(biāo)钉稍,或者都是圖片涤躲,那么全套都要統(tǒng)一。

11?間距的統(tǒng)一性

間距的統(tǒng)一性贡未,是排版中時(shí)刻要注意的种樱。

等距等比是保證界面干凈整齊的一個(gè)關(guān)鍵要素蒙袍。

切記,要么處處一致嫩挤,要么全都不一致害幅。

12?顏色的合理性

顏色的合理運(yùn)用,是至關(guān)重要的岂昭。

一個(gè)app或者一個(gè)界面盡量要保證一個(gè)主色調(diào)以现,一個(gè)輔色調(diào)即可。

不要出現(xiàn)干擾或者與主色調(diào)無(wú)關(guān)的顏色约啊,這樣會(huì)導(dǎo)致用戶質(zhì)疑你到底是不是一款產(chǎn)品邑遏。

其次就是,想讓用戶點(diǎn)擊什么按鈕恰矩,那么取消按鈕最好弱化視覺(jué)记盒。

13?輔助指引的運(yùn)用

這一點(diǎn)是很多人忽視的,一款好的設(shè)計(jì)或者好的產(chǎn)品外傅,一定要做好輔助指引工作纪吮。

比如上面的兩個(gè)登陸界面,如果再輸入過(guò)程中有相應(yīng)的指引萎胰,那么會(huì)減少用戶出錯(cuò)的幾率碾盟,也會(huì)減少來(lái)回點(diǎn)擊查看這個(gè)框是干什么的次數(shù),總之技竟,指引很關(guān)鍵巷疼。

14?該突出就大膽突出

很多時(shí)候,對(duì)比突出做到位了灵奖,才能讓用戶第一跟進(jìn)來(lái)把注意力集中在一個(gè)點(diǎn)上。

比如上面第一個(gè)案例:沒(méi)有形成鮮明的對(duì)比估盘,用戶進(jìn)來(lái)就會(huì)不知道先把注意力集中在哪個(gè)點(diǎn)上瓷患,第二個(gè)是正確的作法。

15?讓用戶知道在什么位置

用戶位置遣妥,是交互邏輯上很重要的一點(diǎn)擅编。

你要讓當(dāng)前位置足夠清晰,要一眼看到現(xiàn)在什么位置才是正確的箫踩,不要害怕對(duì)比過(guò)程爱态,你要做的就是告訴用戶,我在這里境钟。

16?根據(jù)閱讀順序做設(shè)計(jì)

人的正常習(xí)慣閱讀順序是锦担,從上而下,從左到右慨削,所以在做某些需求的時(shí)候洞渔,需要考慮閱讀順序這個(gè)概念套媚,要讓用戶最快的時(shí)間獲取到文字信息。

17?恰當(dāng)跟隨漸變色趨勢(shì)

總結(jié)

2017年自從淘寶ui改版后磁椒,漸變色又逐漸流行起來(lái)堤瘤,但是也不能盲目跟隨,還是看產(chǎn)品主要?dú)赓|(zhì)浆熔。

其次就是運(yùn)用漸變色彩不要跨色系本辐,盡量同色系,根據(jù)明度的變化來(lái)調(diào)節(jié)医增,太浮夸太夸張就是不適合的了慎皱。

這17個(gè) UI 設(shè)計(jì)指南,都是設(shè)計(jì)界面的基本技巧调窍,還有更多的細(xì)節(jié)要在項(xiàng)目時(shí)自己體會(huì)宝冕,這樣就會(huì)慢慢進(jìn)步、提升了邓萨。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末地梨,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子缔恳,更是在濱河造成了極大的恐慌宝剖,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,607評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件歉甚,死亡現(xiàn)場(chǎng)離奇詭異万细,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)纸泄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)赖钞,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人聘裁,你說(shuō)我怎么就攤上這事雪营。” “怎么了衡便?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,960評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵献起,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我镣陕,道長(zhǎng)谴餐,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,750評(píng)論 1 294
  • 正文 為了忘掉前任呆抑,我火速辦了婚禮岂嗓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘鹊碍。我一直安慰自己摄闸,他們只是感情好善镰,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,764評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著年枕,像睡著了一般炫欺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上熏兄,一...
    開(kāi)封第一講書(shū)人閱讀 51,604評(píng)論 1 305
  • 那天品洛,我揣著相機(jī)與錄音,去河邊找鬼摩桶。 笑死桥状,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,347評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼姐军,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼肥败!你這毒婦竟也來(lái)了拘领?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,253評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后酵幕,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,702評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡缓苛,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,893評(píng)論 3 336
  • 正文 我和宋清朗相戀三年芳撒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片未桥。...
    茶點(diǎn)故事閱讀 40,015評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡笔刹,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出冬耿,到底是詐尸還是另有隱情徘熔,我是刑警寧澤,帶...
    沈念sama閱讀 35,734評(píng)論 5 346
  • 正文 年R本政府宣布淆党,位于F島的核電站,受9級(jí)特大地震影響讶凉,放射性物質(zhì)發(fā)生泄漏染乌。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,352評(píng)論 3 330
  • 文/蒙蒙 一懂讯、第九天 我趴在偏房一處隱蔽的房頂上張望荷憋。 院中可真熱鬧,春花似錦褐望、人聲如沸勒庄。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,934評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)实蔽。三九已至荡碾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間局装,已是汗流浹背坛吁。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,052評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留铐尚,地道東北人拨脉。 一個(gè)月前我還...
    沈念sama閱讀 48,216評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像宣增,于是被迫代替她去往敵國(guó)和親玫膀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,969評(píng)論 2 355

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