專訪|5年UI設(shè)計(jì)工作換來的4條經(jīng)驗(yàn)

本文是根據(jù)目前在京東任職的一位資深UI設(shè)計(jì)師的專訪進(jìn)行的文字版整理，這位UI大神從業(yè)時(shí)間5年，具有豐富的品牌知識(shí)與設(shè)計(jì)經(jīng)驗(yàn)，總結(jié)了4條行業(yè)經(jīng)驗(yàn)，快來看看吧，希望這篇文章對(duì)你有所幫助。——AAA小編

從少年到大叔，只用了5年，還記得我剛?cè)肼毜牡谝环莨ぷ鞯膶?dǎo)師和我說：「設(shè)計(jì)沒有什么捷徑，有的只是多看、多想、多做，邏輯思維明確了，思路清晰了，累積多了，項(xiàng)目方案就好解決了」。在5年的工作中，也累積了一些心得，下面就和大家聊聊我對(duì) UI設(shè)計(jì)的幾點(diǎn)心得和一些啟發(fā)。
 

多想、多看、多做

1. 產(chǎn)品思路要吃透

詳細(xì)地分析需求，能讓設(shè)計(jì)師更好的把握產(chǎn)品的思路。多看需求中交互或產(chǎn)品給出的產(chǎn)品流程圖，在初步的交互結(jié)構(gòu)圖中，可以根據(jù)需求大致的構(gòu)造頁面的布局和排版，把頁面內(nèi)容布局和排版記入心中，為整個(gè)項(xiàng)目打下一個(gè)埋點(diǎn)，為將來設(shè)計(jì)創(chuàng)作時(shí)找設(shè)計(jì)參考打好基礎(chǔ)。

2. 換位思考很重要

分析需求時(shí)，需要更多的站在交互或產(chǎn)品經(jīng)理的角度上去看待問題，多看交互流程圖，多想產(chǎn)品的邏輯思維，消化交互（產(chǎn)品經(jīng)理）的整個(gè)產(chǎn)品引導(dǎo)意向。例如之前小編做過的一個(gè)案例，項(xiàng)目為智能家居管理和操控的 APP，在頁面里有搜索框，但是基于公司本身的業(yè)務(wù)和硬件接入最多就二十個(gè)左右，兩三屏的滾動(dòng)查看就看完，對(duì)于本身的搜索意義不大。但對(duì)于產(chǎn)品經(jīng)理，在產(chǎn)品的延伸性和前瞻性來看，這功能必須要有，所以了解了產(chǎn)品的意圖和產(chǎn)品經(jīng)理的思路，我做出了如下的修改：

把搜索框隱藏起來做為按鈕，當(dāng)用戶需要時(shí)點(diǎn)擊按鈕，跳出搜索內(nèi)容界面，這樣就可以把屏幕空間多留給主要功能展示，同時(shí)讓頁面布局嚴(yán)謹(jǐn)不零碎。

思維清晰

1. 分析用戶使用人群

我們?cè)谧霎a(chǎn)品之前，首先要分析產(chǎn)品內(nèi)在需求和使用人群，為了更好的對(duì)用戶動(dòng)機(jī)深挖，最好搭建產(chǎn)品架構(gòu)分析圖和目標(biāo)用戶動(dòng)機(jī)分析圖，這樣帶邏輯性地去分析，對(duì)于我們前期做設(shè)計(jì)推導(dǎo)和產(chǎn)品初步的風(fēng)格落實(shí)起到更好的數(shù)據(jù)支撐。例如下面就是我們團(tuán)隊(duì)對(duì)于現(xiàn)有的一個(gè) APP 功能深挖的分析圖以及一些目標(biāo)用戶的行為分析。

把一些點(diǎn)列出來，預(yù)估會(huì)發(fā)生的事件，預(yù)估我們產(chǎn)品因?yàn)槭录淖呦?，以及功能使用?chǎng)景指向等發(fā)生的事件都例舉出來，這樣對(duì)于我們定義視覺風(fēng)格時(shí)更利于站在用戶角度考慮用戶需要什么，我們?cè)O(shè)立的風(fēng)格對(duì)用戶行為動(dòng)機(jī)產(chǎn)生什么影響。

2. 分析產(chǎn)品功能屬性

對(duì)于人，我們往往根據(jù)他的性格、年齡、打扮，職業(yè)等，給他貼上標(biāo)簽屬性。例如一個(gè)女生打扮性感，我們會(huì)給她貼「御姐范」。年紀(jì)小打扮可愛的會(huì)貼屬性「蘿莉」「軟妹子」。同時(shí)我們產(chǎn)品也是有對(duì)應(yīng)的屬性之分，一個(gè)產(chǎn)品往往根據(jù)自身主打功能來歸屬他的標(biāo)簽屬性。例如產(chǎn)品有專屬與固定職業(yè)使用的我們稱為工具類app；有分享、語音、人與人之間互動(dòng)的我們稱為社交類app；集采購、買賣東西的我們稱為電商類app。這些種種的類別屬性劃分，在這個(gè)類別下還有細(xì)分屬性的劃分，我們往下延伸引導(dǎo)。例如這個(gè)app是社交類的，那它的主打是「男性」？「女性」？「兩性」？「老年人」？「年輕人」？如果確定是女性那主打的是什么年齡層次女性，是「15-25」？「25-35」？「35-45」？這些等等的往下細(xì)分屬性，面對(duì)­­這樣我們可以用一個(gè)思維導(dǎo)圖分析，深入剖析我們想要的數(shù)據(jù)。

這樣一層層深入挖掘分析，最后合理的得出使用人群的偏好、屬性、使用場(chǎng)景，這樣帶邏輯的一層一層往下走對(duì)于我們定義一款新的 App 產(chǎn)品的設(shè)計(jì)風(fēng)格有更明確的指引作用。

邏輯流暢

1. 把握頁面節(jié)奏

音樂節(jié)奏會(huì)帶動(dòng)人的心情高低起伏，那么什么是頁面的節(jié)奏呢？我們說頁面的節(jié)奏是指我們頁面布局怎么去分割，給予用戶什么樣的視覺體驗(yàn)，讓用戶第一眼看到什么，第二眼知道有什么，第三眼發(fā)現(xiàn)什么，都是我們視覺思路明確帶著用戶去體驗(yàn)的。

在層級(jí)關(guān)系上，我們要拿捏規(guī)劃好，主推功能內(nèi)容和附帶功能內(nèi)容還有運(yùn)營需要達(dá)到什么效果，都是需要明確的思路帶用戶往下走的，下面是小編之前做過的一個(gè)案例：

公司的主打產(chǎn)品是硬件銷售，而且明星產(chǎn)品是路由器，所以才衍生了這個(gè)共享Wi-Fi app，我們硬件用戶基數(shù)比較大，所以主要是購買了我們的路由器都可以下載這個(gè) app，把自己家多余的 Wi-Fi流量分享出去得到一些報(bào)酬。

在表面上我們看似是一個(gè)共享功能的app，其實(shí)我們的潛功能目的是為了通過 app 把用戶導(dǎo)入商城購買硬件，所以在主要頁面上我們把廣告位特別突出，弱化了主要的連接功能，讓用戶使用連接功能時(shí)先看到商城優(yōu)惠信息，同時(shí)文案引導(dǎo)去連接Wi-Fi的用戶，讓其產(chǎn)生疑問「干嘛不自己再買個(gè)路由器去分享Wi-Fi增加收益」的心理動(dòng)機(jī)，所以在頁面視覺上我第一眼讓用戶看見廣告，第二眼知道有Wi-Fi連接功能，第三再發(fā)現(xiàn)怎么去使用我們Wi-Fi功能，這樣一步一步讓用戶跟著我設(shè)計(jì)思路的節(jié)奏走。

產(chǎn)品邏輯思路明確，用戶就會(huì)知道他處在當(dāng)前位置應(yīng)該操作什么，下一步該做什么。

2. 尊敬交互邏輯

在比賽上，我們說要尊敬對(duì)手，其實(shí)在共事中，我們也需要尊重交互設(shè)計(jì)的交互流程圖，不要隨意更改交互邏輯，如果產(chǎn)生歧義要合理溝通，找解決方案，所以這時(shí)候我們?cè)谇懊嬷v到的在產(chǎn)品分析上吃透產(chǎn)品需求了，可以從產(chǎn)品上出發(fā)和交互探討，目的達(dá)到一致才可以更改。如果我們只是為了視覺上的效果好看而去更改交互，讓整個(gè) app 交互處于不流暢、不合理是不對(duì)的。

小編曾經(jīng)碰到一個(gè)剛轉(zhuǎn)型的 UI設(shè)計(jì)師，因?yàn)轫撁嬗泻芏噙x擇項(xiàng)的功能，需要一一選擇點(diǎn)擊彈出不同彈窗給用戶選擇對(duì)應(yīng)的內(nèi)容，因?yàn)檫x擇項(xiàng)的功能比較多。在頁面布局上不好對(duì)齊和平衡，結(jié)果他把幾個(gè)不同功能選擇的彈出組件合成一個(gè)，在彈出選擇的組件上加選擇項(xiàng)分區(qū)，這樣做后在用戶角度上，用戶選擇了第一個(gè)功能選項(xiàng)卻把下面的未知功能都選擇了，模糊了用戶當(dāng)前使用位置，讓用戶陷入了不知下一步怎么操作，怎么往下走，這種交互中斷的UI是不合理的。因?yàn)楝F(xiàn)有的app，很多用戶的使用習(xí)慣已經(jīng)完成慣性的邏輯思維，我們想創(chuàng)新交互，必須在現(xiàn)有的基礎(chǔ)上改良或修改，而且是必須合理的，這樣才不會(huì)讓用戶在使用產(chǎn)品過程中產(chǎn)生疑惑或焦慮。

在視覺設(shè)計(jì)時(shí)，我們?cè)O(shè)計(jì)師應(yīng)該跳出設(shè)計(jì)思維的誤區(qū)，不要想著我們?cè)O(shè)計(jì)把頁面做好看就可以了，其他的不是我負(fù)責(zé)的就不管了，往往這樣是錯(cuò)的，把頁面做得好看是我們的基本責(zé)任，把頁面做得好看又好用才是我們要達(dá)到的最終目標(biāo)。所以我們?cè)O(shè)計(jì)師應(yīng)該多學(xué)習(xí)交互邏輯和熟悉產(chǎn)品思路，這樣做出來的作品才是有靈魂的。

3. 規(guī)范細(xì)化

規(guī)范對(duì)于我們?cè)O(shè)計(jì)的核心就是靈魂，視覺上游對(duì)接交互（產(chǎn)品經(jīng)理），下游對(duì)接開發(fā)人員，它都起到闡述設(shè)計(jì)的規(guī)范化、統(tǒng)一化，讓外人可以讀懂我們?cè)O(shè)計(jì)的邏輯思路。

規(guī)范細(xì)化在交接工作中也會(huì)起到高效率的溝通對(duì)接橋梁，所以在設(shè)計(jì)好頁面時(shí)我們應(yīng)該細(xì)化地整理輸出一份設(shè)計(jì)規(guī)范，規(guī)定「標(biāo)題」「副標(biāo)題」「正文」等一系列共同使用的組件的大小、狀態(tài)、間距都是有共通性，邏輯性的，這樣開發(fā)在寫頁面過程中知道我們?cè)O(shè)計(jì)規(guī)范里的共通點(diǎn)，在實(shí)現(xiàn)頁面中就會(huì)有底，知道注意哪些點(diǎn)的字號(hào)用多少，間距是多少等等，我們后期驗(yàn)收工作也會(huì)減少很多勞動(dòng)力。同時(shí)在我們?cè)O(shè)計(jì)與程序之間慢慢地建立合作默契，完成以后工作任務(wù)也達(dá)到事半功倍的效果。

沉淀積累

1. 關(guān)注用戶數(shù)據(jù)和反饋

項(xiàng)目的上線不意味著我們的任務(wù)已經(jīng)完成，打造一個(gè)優(yōu)秀的app 是要不斷地迭代和完善的，app上線后真正的接觸了用戶，用戶的使用數(shù)據(jù)和反饋才是檢驗(yàn)我們勞動(dòng)成果的最真實(shí)證據(jù)。

上線后我們?cè)O(shè)計(jì)需要多關(guān)注用戶的使用數(shù)據(jù)，關(guān)注功能點(diǎn)擊率和留存率，多查看app商城用戶評(píng)分，認(rèn)真看反饋的評(píng)論和后臺(tái)收集的用戶意見，這些最貼近用戶的真實(shí)反饋，累積下來處理，是我們下次迭代的動(dòng)力，這樣一步步根據(jù)用戶的體驗(yàn)去優(yōu)化的產(chǎn)品，才是真正意義上的一個(gè)優(yōu)秀app產(chǎn)品。

2. 做好項(xiàng)目總結(jié)

所謂總結(jié)寫得好，加分又加獎(jiǎng)，設(shè)計(jì)師必須把自己做項(xiàng)目的設(shè)計(jì)思維表達(dá)出來，把自己設(shè)計(jì)中所踩的坑、埋的坑，條理分明的例舉出來，避免下次迭代和其他項(xiàng)目再犯同樣錯(cuò)誤，同時(shí)項(xiàng)目亮點(diǎn)也可以記錄說明，這樣下次再做項(xiàng)目，吸取之前的成功經(jīng)驗(yàn)，避開踩過的坑，更利于我們做好每一個(gè)產(chǎn)品，提高工作效率。

總結(jié)：

以上幾點(diǎn)就是我在工作中血與淚的教訓(xùn)得出的經(jīng)驗(yàn)。UI設(shè)計(jì)與其他視覺的區(qū)分可能就是更多的考慮可玩性、使用性、耐用性，比視覺第一沖擊力還重要。