2021-3-31 ui設(shè)計分享達人
首先我們要明確什么是情緒版?我的理解是:情緒版既不是初稿也不是最終的風格方向,而是設(shè)計師在了解了相關(guān)的產(chǎn)品背景后,基于自己對于產(chǎn)品的理解給出的一個較為初始的設(shè)計建議,并且希望可以通過這個初始的建議與產(chǎn)品側(cè)達成一些相關(guān)的設(shè)計共識。
情緒版的設(shè)計流程大概分為前中后三個階段,前期:分析-收集,中期:篩選-組合,后期:打磨-呈現(xiàn)。
前期:分析-收集
主要是分析產(chǎn)品相關(guān)背景或需求本身的方向,結(jié)合產(chǎn)品背景及需求本身再進一步分析大概的設(shè)計方向并收集相關(guān)素材內(nèi)容。
中期:篩選-組合
當我們收集完成后需要對現(xiàn)有素材進行二次篩選并組合,基于現(xiàn)有素材組合大概的設(shè)計方案結(jié)構(gòu)。
后期:打磨-呈現(xiàn)
基礎(chǔ)方案組合完成后需要進行二次打磨,細化方案的內(nèi)容表現(xiàn),檢查整體的一致性及完整度,最后呈現(xiàn)給產(chǎn)品方。
可能很多設(shè)計師會疑惑為什么要做情緒版,直接設(shè)計初稿不就好了嗎?如果有這個疑問,可能還沒實際了解到情緒版到作用。但我們可以試著從我們在設(shè)計過程中遇到的痛點來了解情緒版的作用或者意義。
在設(shè)計的過程中你是否會存在下面幾個問題:
前期思考不夠——設(shè)計產(chǎn)出方案少;
設(shè)計不懼探索性——設(shè)計來源沒有考究;
初稿多次修改沒能達成共識——設(shè)計表達不出對方想要的;
設(shè)計中期出現(xiàn)不一致——設(shè)計沒有貫徹始終。
從這幾個問題中,我們可以得到一個比較統(tǒng)一的結(jié)論就是:前期設(shè)計呈現(xiàn)內(nèi)容不夠,導致溝通不足而產(chǎn)生方向不統(tǒng)一。因此基于這個關(guān)鍵點,我們再來看情緒版的作用
(1)輔助構(gòu)建世界觀
在前期,世界觀、背景方面的內(nèi)容大多是以文字的方式呈現(xiàn),因此設(shè)計師可以通過情緒版的方式,來輸出對應(yīng)的世界觀設(shè)計表現(xiàn),這樣可以更加直觀的表現(xiàn)出對應(yīng)的視覺語言。
(2)具象設(shè)計想法
在初期與產(chǎn)品側(cè)溝通時,單純靠語言表達的方式很難讓對方達到一種腦補的狀態(tài)。因此借助情緒版的方式更加直觀的呈現(xiàn)設(shè)計想法,通過具象的圖形或者圖形,大大降低雙方的溝通成本。
(3)明確設(shè)計方向
基于第二點的溝通,我們可以明確的了解到產(chǎn)品側(cè)的一些喜好。為后續(xù)設(shè)計初稿時起到一個清晰的方向作用。
(4)提高前期設(shè)計的效率
從零到一設(shè)計一套完整的方案往往需要耗費較長的時間,借助情緒版設(shè)計的方式來快速響應(yīng)一些想法及創(chuàng)意,這樣可以大大提高前期的輸出效率。
從多次的嘗試中,我總結(jié)梳理了幾個基本原則,了解這些原則可以讓我們在做的時候更加嚴謹,輸出更加準確的設(shè)計方案。
(1)多方向性
情緒版的設(shè)計與我們?nèi)粘TO(shè)計一樣,需要給出不同的方向建議,單一的方案往往難以抉擇。多方案輸出除了提升抉擇空間之外,還可以增加方案碰撞的情況,往往可能是方案A的某部分內(nèi)容疊加方案B的某部分內(nèi)容才能產(chǎn)生最初的方向。
(2)嘗試性
此階段的所有輸出皆屬于嘗試與探索,因此不必過于考究設(shè)計細節(jié),重點在于表達出需要相關(guān)的設(shè)計概念及思考想法,把更多的時間留作設(shè)計思考及方案嘗試。
(3)效率性
情緒版的輸出重點在于前期溝通而達到一個比較好的共識,因此在保證質(zhì)量的情況下,避免花費過多的時間而影響輸出的效率性。盡量做到快與準。在過往中項目組,基本上是以半天(4個小時左右)為一個單位來完成一套方案。
(4)試探性
情緒版是一種非常有效試探產(chǎn)品側(cè)想要往那種方向去推動的方式,因為我們在實際的設(shè)計過程中,產(chǎn)品側(cè)可能也對整體的設(shè)計大調(diào)并不少特別有明確的腦補,因此設(shè)計師可以借助情緒版的設(shè)計來挖掘產(chǎn)品側(cè)想要往哪個方向進行發(fā)力。
這里總結(jié)情緒版的設(shè)計方法大概有這幾種:1.借助圖像/插圖、2.結(jié)合實際場景引申、3.借鑒摘取同類型設(shè)計、4.繪制草稿。
(1)借鑒圖像/插圖
在我們設(shè)計一些專題活動或者繪制插圖相關(guān)的一些設(shè)計時,可以考慮使用這種方法來輸出你的情緒版設(shè)計,可以通過借鑒一些設(shè)計網(wǎng)站或插圖網(wǎng)站上的現(xiàn)有素材來拼接,并表達自己在這方法的一些設(shè)計意圖及想法。
(2)結(jié)合實際場景引申
從更概念化的角度出發(fā),通過引用一些實際場景、物品、圖像,來拓展相關(guān)的圖形、質(zhì)感、色彩方面的設(shè)計,并且輸出相關(guān)的設(shè)計雛形。例如我們在設(shè)計LOGO或者圖形類的一些設(shè)計,使用這種方法就可以幫助我們突破一些現(xiàn)有的認知壁壘。
(3)借鑒摘取同類型設(shè)計
在設(shè)計之初,我們通常會有一個大概的思考雛形,但如果直接開始設(shè)計往往效率上并不高。因此可以借助一些設(shè)計網(wǎng)站上的設(shè)計,通過摘取組合的方式呈現(xiàn)自己的初步想法。我通常會在UI新版或者改版的時候使用這種方式,但只能表達大概的想法且不能代表最終的初稿設(shè)計。
(4)繪制草稿
當我們想要表達一些溝通或者框架的設(shè)計時,我們可以使用草稿繪制的方式來表現(xiàn),這個方式簡單快捷,可以很有效率的對齊大部分的設(shè)計共識。
基于原則及方法,我們可以來簡單了解下情緒版設(shè)計中需要注意的一些事項,通過這些內(nèi)容讓你在實際操作過程中少踩一些坑。
(1)控制方案的數(shù)量
設(shè)計方案控制在2-3個左右即可,前期大多是屬于試探性方案呈現(xiàn)及找方向,太多則容易導致選擇困難。
(2)避免篇幅過長
篇幅過長往往容易降低別人閱讀的耐心,對于情緒版的輸出也是如此。結(jié)合過往的經(jīng)驗,建議以16:9的畫面為一頁來呈現(xiàn)一個方案。
(3)區(qū)分重點次要
在一頁內(nèi)呈現(xiàn)的方案避免過于平均,可以適當突出某些想要重點表達的內(nèi)容,例如在這個方案中想要重點突出圖標、顏色等,那么這里需要突出這部分在畫面中的比例,適當縮小其他模塊的尺寸。
(4)結(jié)合世界觀
在輸出情緒版設(shè)計方案時還可以適當考慮結(jié)合產(chǎn)品的世界觀,通過一些具象化的圖形或者插圖來表現(xiàn)相關(guān)的內(nèi)容。例如我們之前在游戲中心改版的嘗試中,就發(fā)散了幾個相關(guān)的世界觀,因此我們在輸出方案時,則只需要把對應(yīng)的世界觀作為方案,通過情緒版的方式表現(xiàn)出來即可。
(5)保持整體風格一致性
一致性是表現(xiàn)一個設(shè)計師是否具有系統(tǒng)化、全局觀的思考思維,因此我們在表現(xiàn)情緒版時也需要關(guān)注這方面的內(nèi)容,避免整體的調(diào)性不匹配。
(6)完整性表達
在呈現(xiàn)方案時,盡量多維度的進行對比,呈現(xiàn)一個完整性、系統(tǒng)性的設(shè)計。例如我們在設(shè)計UI相關(guān)的內(nèi)容,從圖標、顏色、字體等等一系列的內(nèi)容需要細致的闡述清楚,讓人更加能夠了解你的意圖。
由于我日常以設(shè)計UI為主,因此可以給大家重點分享我在UI情緒版設(shè)計的經(jīng)驗。希望可以幫助到大家快速上手。
當你在做UI設(shè)計情緒版時,需要明確了解UI設(shè)計中的結(jié)構(gòu),更系統(tǒng)性的去思考整體的內(nèi)容。我們在UI設(shè)計中往往需要包含以下這些內(nèi)容:圖形系統(tǒng)(圖標+輔助圖形)、顏色系統(tǒng)、字體字形系統(tǒng)、質(zhì)感形態(tài)、界面形態(tài)、插圖風格、動效系統(tǒng)、影像系統(tǒng),等等這些部分的內(nèi)容。
UI情緒版模版
過往實際案例分享
案例一:整體風格比較偏個性一些,頁面嘗試用深色的背景設(shè)計
優(yōu)點:整體風格比較酷,配色比較未來感符合年輕的人的審美,深色的背景讓內(nèi)容更加聚焦。
缺點:深色的設(shè)計接受度是否可以,是否適合平臺類APP設(shè)計
案例二:整體風格3D化的設(shè)計,包括頁面的一些體驗上都可以增加視察的效果來設(shè)計
優(yōu)點:整體設(shè)計風格比較新穎,符合現(xiàn)在的設(shè)計趨勢,整體感覺也比較年輕多彩
缺點:3D的制作成本相對較大。
案例三:整體風格比較清爽,白色融入漸變的設(shè)計也會顯得比較年輕
優(yōu)點:整體頁面清爽,可以滿足任何內(nèi)容的透出,漸變色的圖標和按鈕的設(shè)計補充了細節(jié)
缺點:整體氛圍感、娛樂感較弱。
很多時候我們會覺得情緒版設(shè)計可有可無,或者因為時間的關(guān)系不允許我們經(jīng)過這一步。但,如我一開始提到的點,情緒版可以在前期幫助我們?nèi)ゴ蛲ê芏嗨伎嫉谋趬?,輔助設(shè)計師在前期直觀的與產(chǎn)品側(cè)進行方向上的探討,從而找到大方向上的共識。
文章來源:學UI網(wǎng) 作者:妙妙
藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.sillybuy.com