UI設(shè)計(jì)新手，該怎么按“規(guī)則”做設(shè)計(jì)

“對(duì)于設(shè)計(jì)新手來(lái)說(shuō)，每當(dāng)從產(chǎn)品經(jīng)理手中拿到一份需求的時(shí)候，你有沒(méi)有在設(shè)計(jì)前想過(guò)為什么會(huì)有這些需求？或者是拿到需求后，無(wú)從下手，不知道該怎么用設(shè)計(jì)去表達(dá)解決產(chǎn)品的需求？”

其實(shí)做任何事情都有規(guī)律可循，做設(shè)計(jì)依然，在這里我們就讓這些常見(jiàn)的基礎(chǔ)難題，用金手指抽絲剝繭一一化解，這個(gè)方法，我叫它5大金手指原則：

一、先搞清楚：給誰(shuí)用？在什么時(shí)候用？（不同用戶的不同場(chǎng)景）

首先，你必須要分析做的這個(gè)設(shè)計(jì)解決的是什么人（用戶）、在什么時(shí)候（場(chǎng)景）下的問(wèn)題？

而我在他們前面都加了一個(gè)詞“不同”。

舉例為（一個(gè)直播社交APP設(shè)計(jì)首頁(yè)，也要考慮劃分兩個(gè)不同場(chǎng)景）

不同用戶場(chǎng)景1：首要次使用的新用戶

他對(duì)一個(gè)界面的是完全陌生的，所以他進(jìn)來(lái)的首次體驗(yàn)是非常重要的，這個(gè)狀態(tài)不是一塊空白的畫(huà)布，它應(yīng)該能夠?yàn)橛脩籼峁┓较蚝椭笇?dǎo)。

比如推薦喜歡的直播、熱門的主播、簡(jiǎn)單清晰的使用提示等，以此來(lái)幫助用戶快速適應(yīng)設(shè)計(jì)而留存用戶。

不同用戶場(chǎng)景2：使用過(guò)的老用戶

對(duì)于這種老用戶，他已經(jīng)對(duì)界面熟悉，而且也有過(guò)操作記錄，所以當(dāng)他進(jìn)入首頁(yè)的時(shí)候，他以前所操作的數(shù)據(jù)是不是就應(yīng)該會(huì)匹配顯示。比如他關(guān)注的直播列表、主播、他自己個(gè)人化的定制等。

所以即使是同一個(gè)界面，在不同用戶的不同場(chǎng)景下設(shè)計(jì)也要細(xì)分，有所區(qū)分的進(jìn)行設(shè)計(jì)。

二、搞清楚：用戶在這個(gè)頁(yè)面要做且必做的一件重要的事是什么（每個(gè)頁(yè)面只有一個(gè)北極星目標(biāo)）

做事情不能三心二意，做頁(yè)面設(shè)計(jì)亦是如此。

界面設(shè)計(jì)要簡(jiǎn)潔，一個(gè)頁(yè)面只承載一個(gè)為重要的功能，完成重要的一個(gè)指標(biāo)（北極星目標(biāo)），如果一個(gè)頁(yè)面要表達(dá)的東西太多，那將會(huì)給用戶帶來(lái)選擇恐懼，想要說(shuō)都是重點(diǎn)那也將都不是重點(diǎn)。

有人常常會(huì)遇到說(shuō)：一個(gè)頁(yè)面，產(chǎn)品經(jīng)理給的需求里要呈現(xiàn)的重要信息太多怎么辦？

好辦，我們可以把這個(gè)重要信息列出來(lái)，然后再?gòu)母矗ㄓ脩舻氖滓枨?、邏輯的先后順序）做篩選。

按照P1、P2、P3的優(yōu)先級(jí)來(lái)進(jìn)行視覺(jué)設(shè)計(jì)。

P1一定是有且唯一的，我們要重點(diǎn)突出它，引導(dǎo)來(lái)達(dá)到并提高這個(gè)功能的轉(zhuǎn)化率，讓用戶不用思考，立馬直接去操作就對(duì)了。

當(dāng)然在一個(gè)主要?jiǎng)幼鞯耐瑫r(shí)，可以存在多個(gè)次要?jiǎng)幼?，但不要讓它們喧賓奪主。

三、重點(diǎn)優(yōu)先級(jí)：功能+交互操作+視覺(jué)（層次要清晰）

做設(shè)計(jì)要讓頁(yè)面的元素具有清晰的層次，一個(gè)頁(yè)面的重點(diǎn)是什么？次之是什么？弱化的是什么？

而這個(gè)層次從三個(gè)方面都要有設(shè)計(jì)體現(xiàn)：功能+交互操作+視覺(jué)。

一般情況下，這三個(gè)的優(yōu)先級(jí)基本是一致的，功能的優(yōu)先級(jí)決定了交互操作和視覺(jué)的優(yōu)先級(jí)，視覺(jué)優(yōu)先級(jí)引導(dǎo)用戶的操作路徑的優(yōu)先級(jí)，他們互相制約互相影響。

那么可以通過(guò)強(qiáng)烈的視覺(jué)層次感來(lái)實(shí)現(xiàn)，比如大色塊、大圖片、大字號(hào)、顏色、金剛區(qū)位置、微動(dòng)效等等區(qū)分優(yōu)先級(jí)。

四、可識(shí)別性是首要視覺(jué)原則（能一眼看清和看懂）

清晰明了的識(shí)別是界面設(shè)計(jì)的首要原則。產(chǎn)品好不要搞朦朧派、抽象派，要想你設(shè)計(jì)的界面立意準(zhǔn)確、有效有用，首先就得保證用戶能夠準(zhǔn)確的認(rèn)出它，然后準(zhǔn)確的操作使用它。

舉例：你要設(shè)計(jì)一個(gè)按鈕，那它看上去就必須像個(gè)按鈕，灰色按鈕告訴你是不可操作，彩色的按鈕是可以操作的。如果是個(gè)閱讀APP，那就不能把背景弄得花里胡哨，完全看不清上面的文字。

簡(jiǎn)而言之，就是要保證你這張臉是干凈的沒(méi)有臟東西，眼睛是眼睛，鼻子就是鼻子。

五、取舍：功能性能大于視覺(jué)（好用之后才是好看）

對(duì)大多數(shù)設(shè)計(jì)師來(lái)說(shuō)，都把自己定位為視覺(jué)型設(shè)計(jì)師，把顏值看得比生命還重要，殊不知我們應(yīng)該晉級(jí)成為產(chǎn)品型設(shè)計(jì)師、運(yùn)營(yíng)型設(shè)計(jì)師甚至是還要懂一點(diǎn)技術(shù)的設(shè)計(jì)師，要帶著用戶的思維從源頭來(lái)看這件事，那就是設(shè)計(jì)這個(gè)界面的目的是什么？

答案：為了解決用戶的問(wèn)題。

舉例：我需要一把椅子，設(shè)計(jì)師花了很多心思遠(yuǎn)赴千里從國(guó)外找到材料，做了一個(gè)很美觀很高大上的桌子，雖然精美花費(fèi)巨大，但是你覺(jué)得有用嗎？用戶不會(huì)選擇使用它，它就是失敗的設(shè)計(jì)。所以，你還不如就在隔壁拿一把木椅子給我，雖不精美但是又快又有用，何樂(lè)而不為。

因此，界面設(shè)計(jì)不僅僅只是設(shè)計(jì)一個(gè)美麗的外表，它必須在保證有用好用的前提下再是好看！

有舍才有得，即便舍棄視覺(jué)也要保障功能性能。

總結(jié)

無(wú)論是設(shè)計(jì)前的思考，還是完稿后的審查，都可以按照上面金手指的5個(gè)步驟標(biāo)準(zhǔn)，保證設(shè)計(jì)的完整性、合格性。

網(wǎng)站題目：UI設(shè)計(jì)新手，該怎么按“規(guī)則”做設(shè)計(jì)
文章鏈接：http://www.muchs.cn/news48/263998.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、建站公司、網(wǎng)站收錄、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)