專訪|5年UI設計工作換來的4條經(jīng)驗

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

從少年到大叔，只用了5年，還記得我剛入職的第一份工作的導師和我說：「設計沒有什么捷徑，有的只是多看、多想、多做，邏輯思維明確了，思路清晰了，累積多了，項目方案就好解決了」。在5年的工作中，也累積了一些心得，下面就和大家聊聊我對 UI設計的幾點心得和一些啟發(fā)。
 

多想、多看、多做

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

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

2. 換位思考很重要

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

把搜索框隱藏起來做為按鈕，當用戶需要時點擊按鈕，跳出搜索內容界面，這樣就可以把屏幕空間多留給主要功能展示，同時讓頁面布局嚴謹不零碎。

思維清晰

1. 分析用戶使用人群

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

把一些點列出來，預估會發(fā)生的事件，預估我們產(chǎn)品因為事件的走向，以及功能使用場景指向等發(fā)生的事件都例舉出來，這樣對于我們定義視覺風格時更利于站在用戶角度考慮用戶需要什么，我們設立的風格對用戶行為動機產(chǎn)生什么影響。

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

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

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

邏輯流暢

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

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

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

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

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

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

2. 尊敬交互邏輯

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

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

在視覺設計時，我們設計師應該跳出設計思維的誤區(qū)，不要想著我們設計把頁面做好看就可以了，其他的不是我負責的就不管了，往往這樣是錯的，把頁面做得好看是我們的基本責任，把頁面做得好看又好用才是我們要達到的最終目標。所以我們設計師應該多學習交互邏輯和熟悉產(chǎn)品思路，這樣做出來的作品才是有靈魂的。

3. 規(guī)范細化

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

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

沉淀積累

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

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

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

2. 做好項目總結

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

總結：

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