一線設計師都在用的UI產品分析思維與技巧

前言

在設計中，很多設計師，只思考：做得漂不漂亮；

我們這裡有一些進階問題，大家可以先思考一下：

1、元素、版塊的重要程度如何判斷？完全依靠產品？

2、怎樣對產品給出的原型進行優化？平時純做原型彩色化？

美團前資深視覺設計、站酷300+萬推薦設計師總結了UI產品設計中布局層級梳理的相關知識，包括常見的設計誤區、梳理常見的設計瓶頸期、瓶頸期突破及大廠的招聘準則、設計師梳理需求的三大維度、設計處理排版需求：十字交叉分析、產品功能目標的認識等關鍵點，希望能夠幫助設計師完成初級到中高級思維的轉變及必備設計技法的掌握。本次分享100%純乾貨，從實際案例出發剖析關鍵點，實戰性強，滿足中高階設計師的職業發展需求。

請注意：文章末尾高能！！！

案例一：設計優化角度

如在教育類產品的個人中心頁面中，如何讓用戶更快速找到功能，應該從哪些角度入手？

可從業務目標、使用頻次、用戶目標三個維度，對個人中心的功能進行劃分，從而確定設計重點。

作為一款在線教育產品，在業務目標中，與盈利相關的功能有「我的餘額、優惠券」，業務主功能有「筆記、班級收藏、課程資料」；

在用戶目標中，用戶快速查找的功能有「筆記、班級收藏、課程資料」

在使用頻次中，使用頻次較高的功能有「筆記、班級收藏、課程資料」

通過三個維度分析後，可對功能進行層級梳理，從而確定設計重點功能

經過這麼多的分析，怎麼確定布局層級？

這裡我們採用的方法是分析同類競品。

在競品一中，一級功能實用彩色面性圖標方便功能的快速查找。

在競品二三中，分別採用彩色、灰色面性圖標表現不同的視覺層級

通過視覺手法梳理功能的層級關係，頁面精細度的提升，不僅僅只考慮視覺，更多的是從功能目的出發，幫助用戶更好的實現使用目的。

在圖標設計中，使用了2個小工具：

一、是圖標盒子對圖標視覺大小進行統一；

二、是使用Adobe color cc進行多色系配色。

案例二：布局優先順序

在首頁設計中，如何確定布局優先順序？是否有一些科學的方法？這裡介紹兩個方法論：十字交叉分析、界面瀏覽測試。

十字交叉分析的兩個維度：對用戶的重要程度、對公司緊急程度

通過Kano模型對用戶重要程度進行分析，banner和列表流為必備因素，不提供滿意度大幅下降；金剛區為期望因素，方便用戶快速進入二級頁面，提升滿意度。

對公司緊急程度，通過UV*歷史轉化率進行排序。

最後通過XY軸坐標系，對三個版塊進行定位，banner（3，3），金剛區（2，2）列表流（1，1），從而確定布局的優先順序。

為了達到設計的閉環，設計方案必須得到用戶理解，如何驗證首頁布局優先順序得到用戶的理解？這裡介紹方法論：界面瀏覽測試。

通過三個問題的形式對目標用戶進行調研，以保證設計方案達到設計目的。

前方高能正在靠近！！！

本期技能分享者是美團前資深視覺設計、EDC設計研究中心創始人、站酷300+萬推薦設計、站酷高高手簽約講師、虎課網UI板塊資深講師、優設簽約作者、淘寶天下網商特邀訪談嘉賓張雙（silence），他擁有豐富的用戶體驗設計經驗，希望能通過簡便的途徑與大家一起更加細緻深入地交流，他將於近期給大家帶來一場公開直播課程。

主題：UI產品設計進階之道——以產品為中心的設計體系

時間：2018.8.15 20:00-21:00（報名後當天會有手機語音/簡訊提示，精彩不會錯過）

講師：張雙（silence）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！