編輯導語:在進行設計工作時,當團隊人數變多,内容變複雜時,往往會出現一些常見的問題。這種情況下,如何讓你的設計變得更有價值呢?本文作者總結了一套設計流程指南,希望能夠幫助你。
随着設計團隊規模擴大,人數快速增多,但每個人都帶着自己以往工作經驗和習慣,一些典型問題也相應顯現:上手就幹、主觀設計、缺少方法、忽視跟進等等。
所以我們撰寫了「UI标準設計流程」,希望能為UI設計師提供對于設計支撐思路的共識,讓設計更有價值:
從接到需求到上線後跟蹤,我們把流程拆分為五個節點:需求分析-交互設計-視覺設計-視覺規範-方案驗證。當然,在設計流程中我們隻表達不同流程中的行為目的及标準,相關方法論我們會配套一份「設計師成長指南」,不久之後再與大家分享。
一、需求分析我們在接到一個設計需求後,要做的第一步是進行分析并确定設計目标。
我們需要:了解背景、用戶和競品,能準确理解産品定位和需求目标,評估需求的合理性和準确性,并提供相應策略;甚至洞見機會點,通過設計對業務産生正向價值。
1. 背景分析
目的:背景分析是為了讓我們在剛接觸産品的時候,去洞察表面背後的東西。通過背景分析,能幫助我們快速切入産品,并根據已有信息去制定準确并具有說服力的設計策略。
行為:我們需要了解:産品的定位及價值是什麼,它的現狀如何,是否有既往的數據沉澱或經驗總結。
2. 用戶分析
目的:對UI設計師而言,用戶分析是為了讓我們更好地了解産品,并擁有對整個産品的宏觀思路。通過用戶分析,能為我們的視覺設計提供方向,并為我們做出決策提供實際落點。
行為:我們通常需要了解:用戶畫像、用戶需求、用戶行為、用戶路徑等。
3. 競品分析
目的:競品分析能夠讓我們獲得行業内的優秀經驗,減少我們的思維盲區,同時還為我們提供了一份可被量化的标準,使我們可以基于競品去反推現有産品。
行為:UI設計師可以從競品定位、主要功能、疊代動向、産品結構、頁面布局、交互動效、視覺設計、優劣勢對比這幾個維度去進行競品分析。
4. 需求評估
目的:在了解以上的通用信息後,我們要對需求進行評估,去決定采用哪種方式、制定什麼樣的策略。
行為:我們接到的需求,通常可以分為三種:全新産品類、産品改版類、功能新增或優化類。
對不同類型的需求,我們都可以用5個問題去評估:
- 是否可被證僞?
- 目标是否明确?
- 投産比如何?
- 是否有更優解法?
- 是否有可預見風險?
基于以上問題,我們可以去協同交互、産品做相應調整和策略制定,甚至發現新的機會點并進行推動。
5. 目标對齊
目的:設計為目标服務,所以我們要在設計開始前與需求方對齊目标,這也能為設計價值的佐證提供标準。
行為:設計目标通常有3種,我們可以從中去對需求目标轉譯:提升數據型、解決問題型、體驗優化型、創新項目型。針對不同目标我們可以去制定不同的設計策略,并對策略的落地進行數據監測與分析,進行方案校正。
二、交互設計在産品流程中,交互設計的作用在于,通過信息架構的組織去産出體驗流暢的界面原型。
我們需要:充分理解整體流程與交互原型,基于設計原則去發現可優化的部分;同時能平衡産品、設計與開發的效益最大化,并驅動産品的體驗提升。
1. 設計原則
目的:設計原則能為我們提供一個行之有效的設計向導或提示。熟知各類設計原則,能使我們在設計支撐時,擁有更豐厚的專業度和更敏銳的洞察力。
行為:我們需要去了解市面常見的Guildline如iOS、Material、UWP等,以及一些常用原則如菲茲定律、格式塔理論等等。
2. 流程梳理
目的:流程的再梳理,可以幫助我們在視覺設計前,快速地理解和診斷流程邏輯。
行為:在流程再梳理的過程中,我們需要注意以下4個問題:
- 功能是否完整?
- 鍊路是否流暢?
- 步驟是否冗餘?
- 是否易于理解?
基于以上問題,我們可以用自身的專業儲備去推動流程的優化。
3. 原型優化
目的:交互原型是需求内容的外在表現,通過原型優化,可以最大程度地避免視覺評審後的設計返工。
行為:在對交互原型優化的過程中,我們要重點注意以下4個問題:
- 架構是否符合目标
- 層級是否足夠精簡
- 信息是否傳達準确
- 狀态是否有所缺失
在視覺設計時,我們基于以上四點可以去同步優化原型,并根據經驗去尋求體驗和成本的最佳平衡。
三、視覺設計視覺設計是産品與用戶直接連接的媒介,優質而恰當的視覺設計,可以極大地提升産品吸引力。
我們需要:基于分析确定視覺方向、定義設計語言,輸出完整且高質量的視覺頁面。
1. 設計情緒闆
目的:設計情緒闆可以為設計語言的構建提供可視化參考,也有助于我們前期快速與各方達成共識。
行為:我們通常基于分析,去确定設計關鍵詞,并基于關鍵詞去衍生映射物、建立圖形情緒闆,最終分析和确定設計方向。
2. 設計語言
目的:設計語言是情緒闆的具象表達,它将構建起用戶對産品的視覺感知。
行為:在明确設計方向後,我們就要基于情緒版去定義設計語言,主要包括主視覺、色彩、字體、圖标、圖形、動效等。
3. 典型頁面
目的:典型頁面是設計語言在場景中直觀體現,這有助于我們制定設計規範,并為其他頁面的設計提供參考。
行為:我們通常需要設計首頁、頻道頁或其他具有示例作用的典型頁面,在設計的過程中我們還需要同步去規範間距、卡片、視覺變量、圖形應用等,以此為視覺規範夯實基礎。
四、設計系統在設計典型頁面的同時,其背後其實已經對應了一套設計規範和組件,而我們基于此去整理并沉澱出設計系統,能極大地提升統一性和疊代效率。
我們需要:制定完整、清晰的基礎規範,沉澱圖标庫、組件庫等,并持續優化和更新,形成可持續沿用的産品設計系統。
1. 基礎規範
目的:基礎規範是設計語言的沉澱,也是視覺變量的基本粒子。它可以保證頁面的基本統一,同時我們可以基于不同業務快速地拓展其他主題。
行為:在我司,一份基礎規範的構成包括:色彩、字體、間距、布局、斷點、層級、圓角、透明度、陰影。
2. 圖标庫
目的:圖标規範可以幫助其他成員快速、準确地進行圖标拓展,而沉澱的圖标庫也可以極大地提升産出效率。
行為:基于具體需要,我們可以設定多套圖标風格,規範其栅格、筆畫、圓角等,并将已有的圖标資産進行沉澱。同時我們也會去規範一些常見圖形并沉澱,如空态插畫、懸浮入口、徽章、商品等。
3. 組件庫
目的:組件庫是對常用控件進行設計規範、開發、封裝的可被複用的集合,組件分而治之,可被自由組合,能保證設計品質、統一用戶體驗、提升産研效率。
行為:在我司,一套組件庫通常包括:通用、布局、導航、數據錄入、數據展示、反饋、其它。除通用原子組件外,我們也會對常用模塊進行梳理,沉澱業務組件庫。
五、落地跟蹤在設計完成之後,我們需要對設計方案進行評審、驗收及數據跟蹤,以保證設計方案的落地并跟進調整。
我們需要:運用合理策略以保證設計方案的高質量落地,對方案上線後的用戶反饋進行有效跟進,運用多種方式驗證目标,疊代産品。
1. 設計評審
目的:設計評審通常包含了交互與視覺,其目的在于審查設計方案中的可用性問題。
行為:在我司,視覺評審即終評,我們需要在視覺稿中标注出所有交互邏輯,并對潛在問題有預判,能與各方确認目标、分桶與數據埋點;同時我們要對開發實現有預判,能與研發确認實現細節。
2. 設計驗收
目的:設計驗收是為了确保需求滿足、體驗流暢,并且設計細節能高質量落地。
行為:視覺設計師主要驗收視覺細節的還原度,并且要在一定程度上對開發的适配、樣式解法有預知,減少二次驗收。同時需要保證驗收有沉澱,利于後續跟進。
3. 數據驗證
目的:數據驗證除了分析分桶之外,也可以分析産品上線後的一些問題、并在疊代中修改。同時我們也可以總結設計經驗、提升未來設計的準确率。
行為:我們通常基于設計策略,去對數據進行篩選與分析,以此衡量設計對于目标達成的增益度。對于有問題的,能反思并且修改;對于結果好的,能總結并且沉澱。
4. 設計複盤
目的:設計複盤以結果為導向,我們可以通過複盤對設計策略的價值進行總結驗證,并去發現、優化流程中的不足之處。
行為:我們需要陳述設計目标和策略,對設計價值進行驗證,并能總結過程中的亮點與不足,制定後續計劃、沉澱相關經驗。
作者:不戳;公衆号:酷家樂用戶體驗設計
本文由 @酷家樂用戶體驗設計 原創發布于人人都是産品經理,未經許可,禁止轉載
題圖來自 Unsplash,基于 CC0 協議
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!