網頁設計 ? 視覺設計 ? 科學UI設計流程提升視覺效果

科學UI設計流程提升視覺效果

發表于: 視覺設計. 評論
Sponsor

做出來的UI仿佛停留在幾年前的標準上?為什么自己做出來的UI總感覺和商業級的差了那么些感覺?別怕,就把這樣的UI當作初稿,通過科學的設計流程提升UI的視覺效果吧。本文通過分析-提升-驗證的思考流程來幫助你從全局觀看待UI的邏輯關系,將設計拆解成組件-視覺細節-界面層級的方式來優化視覺效果。最后,還以品牌吉祥物的案例還原如何在設計中一步步推導出符合品牌調性的IP設定。

科學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設計流程提升視覺效果
手部的光影塑造手法和前面衣服的光影相仿。一開始做不出滿意的光影是可以理解的,但請不要煩躁,去摸索,去嘗試。同學們甚至可以摒棄教程,自己動手去試錯,嘗試得多之后就會逐漸理解符合世界物理準則的光影應該怎么去塑造。也不要忘了閱讀光影相關的視頻和書籍去學習光影的知識。

如果同學們想要了解光線的運用,可以進一步閱讀《視覺藝術用光:在藝術與設計中理解與運用光線》和《色彩與光線》,在實際運用中反復參考光影的奧妙。如果有不明白的地方,歡迎同學們在設計達人公眾號回復暗號“進群”,卡住的地方或許別人一句話就點醒自己。

九、問題答疑截圖

科學UI設計流程提升視覺效果

以上是《科學UI設計流程提升視覺效果》的全部內容,感謝大家閱讀。如果你有其他不同的想法,歡迎在評論區提出,大家一起探討!

作者:EthankDesign,個人主頁:https://ethankdesign.zcool.com.cn

推薦:查看最受歡迎的 301 個設計網站 → http://hao.shejidaren.com
交流:結交更多有才華的設計師?請加入UI設計QQ群,與50000名設計師交流設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創文章,轉載請聯系我們授權,否則禁止轉載。

{ 發表評論 }