UI設(shè)計(jì)新手,該怎么按“規(guī)則”做設(shè)計(jì)
“對(duì)于設(shè)計(jì)新手來說,每當(dāng)從產(chǎn)品經(jīng)理手中拿到一份需求的時(shí)候,你有沒有在設(shè)計(jì)前想過為什么會(huì)有這些需求?或者是拿到需求后,無從下手,不知道該怎么用設(shè)計(jì)去表達(dá)解決產(chǎn)品的需求?”
其實(shí)做任何事情都有規(guī)律可循,做設(shè)計(jì)依然,在這里我們就讓這些常見的基礎(chǔ)難題,用金手指抽絲剝繭一一化解,這個(gè)方法,我叫它5大金手指原則:
一、先搞清楚:給誰用?在什么時(shí)候用?(不同用戶的不同場景)
首先,你必須要分析做的這個(gè)設(shè)計(jì)解決的是什么人(用戶)、在什么時(shí)候(場景)下的問題?
而我在他們前面都加了一個(gè)詞“不同”。
舉例為(一個(gè)直播社交APP設(shè)計(jì)首頁,也要考慮劃分兩個(gè)不同場景)
不同用戶場景1:第一次使用的新用戶
他對(duì)一個(gè)界面的是完全陌生的,所以他進(jìn)來的首次體驗(yàn)是非常重要的,這個(gè)狀態(tài)不是一塊空白的畫布,它應(yīng)該能夠?yàn)橛脩籼峁┓较蚝椭笇?dǎo)。
比如推薦喜歡的直播、熱門的主播、簡單清晰的使用提示等,以此來幫助用戶快速適應(yīng)設(shè)計(jì)而留存用戶。
不同用戶場景2:使用過的老用戶
對(duì)于這種老用戶,他已經(jīng)對(duì)界面熟悉,而且也有過操作記錄,所以當(dāng)他進(jìn)入首頁的時(shí)候,他以前所操作的數(shù)據(jù)是不是就應(yīng)該會(huì)匹配顯示。比如他關(guān)注的直播列表、主播、他自己個(gè)人化的定制等。
所以即使是同一個(gè)界面,在不同用戶的不同場景下設(shè)計(jì)也要細(xì)分,有所區(qū)分的進(jìn)行設(shè)計(jì)。
二、搞清楚:用戶在這個(gè)頁面要做且必做的一件重要的事是什么(每個(gè)頁面只有一個(gè)北極星目標(biāo))
做事情不能三心二意,做頁面設(shè)計(jì)亦是如此。
界面設(shè)計(jì)要簡潔,一個(gè)頁面只承載一個(gè)最為重要的功能,完成最重要的一個(gè)指標(biāo)(北極星目標(biāo)),如果一個(gè)頁面要表達(dá)的東西太多,那將會(huì)給用戶帶來選擇恐懼,想要說都是重點(diǎn)那也將都不是重點(diǎn)。
有人常常會(huì)遇到說:一個(gè)頁面,產(chǎn)品經(jīng)理給的需求里要呈現(xiàn)的重要信息太多怎么辦?
好辦,我們可以把這個(gè)重要信息列出來,然后再從根源(用戶的第一需求、邏輯的先后順序)做篩選。
按照P1、P2、P3的優(yōu)先級(jí)來進(jìn)行視覺設(shè)計(jì)。
P1一定是有且唯一的,我們要重點(diǎn)突出它,引導(dǎo)來達(dá)到并提高這個(gè)功能的轉(zhuǎn)化率,讓用戶不用思考,立馬直接去操作就對(duì)了。
當(dāng)然在一個(gè)主要?jiǎng)幼鞯耐瑫r(shí),可以存在多個(gè)次要?jiǎng)幼?,但不要讓它們喧賓奪主。
三、重點(diǎn)優(yōu)先級(jí):功能+交互操作+視覺(層次要清晰)
做設(shè)計(jì)要讓頁面的元素具有清晰的層次,一個(gè)頁面的重點(diǎn)是什么?次之是什么?最弱化的是什么?
而這個(gè)層次從三個(gè)方面都要有設(shè)計(jì)體現(xiàn):功能+交互操作+視覺。
一般情況下,這三個(gè)的優(yōu)先級(jí)基本是一致的, 功能的優(yōu)先級(jí)決定了交互操作和視覺的優(yōu)先級(jí),視覺優(yōu)先級(jí)引導(dǎo)用戶的操作路徑的優(yōu)先級(jí),他們互相制約互相影響。
那么可以通過強(qiáng)烈的視覺層次感來實(shí)現(xiàn),比如大色塊、大圖片、大字號(hào)、顏色、金剛區(qū)位置、微動(dòng)效等等區(qū)分優(yōu)先級(jí)。
四、可識(shí)別性是第一視覺原則(能一眼看清和看懂)
清晰明了的識(shí)別是界面設(shè)計(jì)的第一原則。產(chǎn)品最好不要搞朦朧派、抽象派,要想你設(shè)計(jì)的界面立意準(zhǔn)確、有效有用,首先就得保證用戶能夠準(zhǔn)確的認(rèn)出它,然后準(zhǔn)確的操作使用它。
舉例:你要設(shè)計(jì)一個(gè)按鈕,那它看上去就必須像個(gè)按鈕,灰色按鈕告訴你是不可操作,彩色的按鈕是可以操作的。如果是個(gè)閱讀APP,那就不能把背景弄得花里胡哨,完全看不清上面的文字。
簡而言之,就是要保證你這張臉是干凈的沒有臟東西,眼睛是眼睛,鼻子就是鼻子。
五、取舍:功能性能大于視覺(好用之后才是好看)
對(duì)大多數(shù)設(shè)計(jì)師來說,都把自己定位為視覺型設(shè)計(jì)師,把顏值看得比生命還重要,殊不知我們應(yīng)該晉級(jí)成為產(chǎn)品型設(shè)計(jì)師、運(yùn)營型設(shè)計(jì)師甚至是還要懂一點(diǎn)技術(shù)的設(shè)計(jì)師,要帶著用戶的思維從源頭來看這件事,那就是設(shè)計(jì)這個(gè)界面的目的是什么?
答案:為了解決用戶的問題。
舉例:我需要一把椅子,設(shè)計(jì)師花了很多心思遠(yuǎn)赴千里從國外找到材料,做了一個(gè)很美觀很高大上的桌子,雖然精美花費(fèi)巨大,但是你覺得有用嗎?用戶不會(huì)選擇使用它,它就是失敗的設(shè)計(jì)。所以,你還不如就在隔壁拿一把木椅子給我,雖不精美但是又快又有用,何樂而不為。
因此,界面設(shè)計(jì)不僅僅只是設(shè)計(jì)一個(gè)美麗的外表,它必須在保證有用好用的前提下再是好看!
有舍才有得,即便舍棄視覺也要保障功能性能。
總結(jié)
無論是設(shè)計(jì)前的思考,還是完稿后的審查,都可以按照上面金手指的5個(gè)步驟標(biāo)準(zhǔn),保證設(shè)計(jì)的完整性、合格性。
作者:早鴨同學(xué);公眾號(hào):早鴨同學(xué)
本文由 @早鴨同學(xué) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
此屁有理