為什麼你的設計這麼爛?-科學UI設計流程改進作品

本次分享主要解答大家在設計過程中常見的一些疑惑。設計在視覺提現上很重要,同樣重要的是設計過程中的思考,本文將通過結合 同學們的個人項目,對設計進行了拆解與分析。

一、學習成果展示

為什麼你的設計這麼爛?-科學UI設計流程改進作品

為什麼你的設計這麼爛?-科學UI設計流程改進作品

二、同學們在作業中面臨的問題?

  1. 視覺效果平淡、 精細化不足怎麼辦?
  2. 分析就是找資料嘛? 那如何落地到設計呢?
  3. UI規範不明確、 我做得對嗎?
  4. 工作效率低,組件化的設計

三、思維培養從每一次作業開始

科學的作業體系

為什麼你的設計這麼爛?-科學UI設計流程改進作品

四、科學的設計流程:前中後設計思維

從科學的設計流程到界面層級和組件思維,

逐步提高設計精細度,全方位拔高學員設計能力,提高設計競爭力

為什麼你的設計這麼爛?-科學UI設計流程改進作品

五、設計流程講解

為什麼你的設計這麼爛?-科學UI設計流程改進作品

01. 資料總結

為什麼你的設計這麼爛?-科學UI設計流程改進作品

為什麼你的設計這麼爛?-科學UI設計流程改進作品

同學問題1: 工作流程不完善,設計就是一頓抄?

為什麼你的設計這麼爛?-科學UI設計流程改進作品

痛點:中小型公司任職,缺少相對專業的設計流程;

現狀:這種情況下,接到需求後會直接進行設計,但往往得不到領導的認可,造成反覆改稿;

為什麼你的設計這麼爛?-科學UI設計流程改進作品

策略:那麼如何有效挖掘產品背後的真實需求呢?

5WH是一種挖掘產品需求的思維體系和思考過程

通過了解產品和目標用戶,可以總結出設計目標,這是一切的基礎

同學問題2: 分析如何進行總結?

痛點:分析等於找資料嗎?當然不是

為什麼你的設計這麼爛?-科學UI設計流程改進作品

策略:如果想更好的去理解產品,一定要理解和總結,下面是對酷狗的背景調研。在對行業和產品理解後,得出了酷狗的商業模式,並將商業模式進行了

可視化研究版塊分析,直接影響到首頁中是否加入直播的版塊,是產品內外環的重要依據。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

為什麼你的設計這麼爛?-科學UI設計流程改進作品

02. 用戶畫像

同學問題3:用戶畫像如何影響設計?

通過數據得知,年輕男性為主要用戶,結合付費人群特徵,得出年輕學生和職場精英的用戶畫像,挖掘出用戶態度、行為和期望,以及情緒板。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

為什麼你的設計這麼爛?-科學UI設計流程改進作品

03. 分析落地

同學問題3:落地界面是如何用的?

品牌顏色一藍色漸變為什麼採用漸變?

  1. 凸顯品牌感
  2. 漸變符合年輕化的潮流
為什麼你的設計這麼爛?-科學UI設計流程改進作品

六、設計中設覺拔高

為什麼你的設計這麼爛?-科學UI設計流程改進作品

01. 組件思維

作品展示

為什麼你的設計這麼爛?-科學UI設計流程改進作品

改版思路

針對首頁的用戶人群,對首頁展示區域作優化,提升首頁各模塊的轉化率。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

組件化思維

界面採用卡片流設計,佈局一致,更好的利用組件思維,方便複用。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

組件應用

通過組件提高界面複用度,快速搭建界面,提升設計效率。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

02. 設計精細度

視覺細節拆分

為什麼你的設計這麼爛?-科學UI設計流程改進作品

組件細節拆分

為什麼你的設計這麼爛?-科學UI設計流程改進作品

03. 界面層級

結合方法論和該產品實際情況,個人中心的視覺層級為:用戶信息>核心功能區>功能入口區;

為什麼你的設計這麼爛?-科學UI設計流程改進作品

七、設計後視覺驗證

為什麼你的設計這麼爛?-科學UI設計流程改進作品

01. 衡量指標

為什麼你的設計這麼爛?-科學UI設計流程改進作品


視覺衡量指標

原版我的將功能放入左上角漢堡菜單,音樂圈、K歌圈等功能用了文字樣式,同時佈局緊湊,字體層級不明顯,導致用戶識別和查找效率低.

為什麼你的設計這麼爛?-科學UI設計流程改進作品

02. 任務測試

任務測試

通過對個人中心改版A和B進行測試。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

為什麼你的設計這麼爛?-科學UI設計流程改進作品

總結:選用B方案,在歌單較多的情況下,也不用擔心找不到功能選項。

八、品牌IP精細度

通過這些進一步聯想推敲,我們可以得出品牌顏色——藍色漸變;

為什麼採用漸變?首頁此次作業切入點是品牌感,為了凸顯品牌感,

首頁沒有采用頂部極簡的設計;結合年輕化的潮流,顯然漸變是我們的首選;

形象背景

為什麼你的設計這麼爛?-科學UI設計流程改進作品

關鍵詞提取

為什麼你的設計這麼爛?-科學UI設計流程改進作品

細節靈感

為什麼你的設計這麼爛?-科學UI設計流程改進作品

三視圖展示

為什麼你的設計這麼爛?-科學UI設計流程改進作品

為什麼你的設計這麼爛?-科學UI設計流程改進作品

形象IP拆解

為什麼你的設計這麼爛?-科學UI設計流程改進作品

耳朵主要用矢量圖以及圖層樣式堆疊。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

看似立體感十足的頭部其實是內陰影的功勞。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

眼睛的繪製中,難度在於類似月食的疊加投影。

為什麼你的設計這麼爛?-科學UI設計流程改進作品

衣領看似複雜,如果分解化簡的話不難發現,光影的塑造在於高光和陰影之間構成的層次感。

為什麼你的設計這麼爛?-科學UI設計流程改進作品


衣服對高光和陰影的塑造更加細膩。用三層圖層樣式來塑造邊緣的高光。高光和陰影在著丈(衣服中間部位)處通過明暗對比凸顯質感。

為什麼你的設計這麼爛?-科學UI設計流程改進作品


手部的光影塑造手法和前面衣服的光影相仿。一開始做不出滿意的光影是可以理解的,但請不要煩躁,去摸索,去嘗試。同學們甚至可以摒棄教程,自己動手去試錯,嘗試得多之後就會逐漸理解符合世界物理準則的光影應該怎麼去塑造。也不要忘了閱讀光影相關的視頻和書籍去學習光影的知識。

如果你有其他不同的想法,歡迎在評論區提出,大家一起探討!


分享到:


相關文章: