編者按:完整的 UI 設計流程到底是怎樣的?從需求到產品上線,要經歷多少個階段,每個階段有哪些應該掌握的基礎知識,本次優設獨家專題為你從零開始梳理出 UI 工作流程,適合新手閱讀學習。

本篇為工作流程第二節:原型設計。上期回顧:《超全面的 UI 設計工作流程指南(一):需求分析》

原型設計的主要作用,是用戶體驗設計師與 PM、網站開發工程師溝通最初的產品設想的重要工具,展示產品內容和結構及粗略的結構,說明用戶將如何與產品進行交互,而不是視覺設計。

在大廠中,職位分工更為細致明確,大多原型都是由產品經理制作的,而中小企業里,更多的是設計師也要具備制作原型的能力。原型圖階段中設計師需要和產品經理溝通需求,并不是產品經理向設計師下發需求,而是需要相互就自己擅長的方面進行溝通。

原型類型區別

云南体彩网設計時原型的類別也需要關注,每個項目啟動時對原型的需求紛歧建都相同,交流的對象也有可能會對原型的類別發生混淆,以為線框圖(Wireframe)、原型(Prototype)和視覺稿(Mockup)是一個器械,設計開始前最好先與產品經理/甲方確認要繪制什么類型的原型。

三種類別雖然產出效果分歧,但在實質上都是一樣的,為設計開發服務,所以在產品研發時,并沒有硬性規定一定先產出哪一個類別的原型圖,一切以實際研發過程中的要求為準。

交互設計原則

交互設計作為原型設計里的重要環節,了解交互設計原則,給交互設計提供更多設計支持。

1. Fitts’ Law / 菲茨定律(費茨法則)

目標離的越遠,達到就越是費勁。目標越小,就越難點中。如果我們要想鼠標比較快速地命中目標可以采取兩個辦法,要么減少鼠標與目標之間的距離,要么使目標足夠大。

2. Hick’s Law / 席克定律(希克法則)

云南体彩网一個人面臨的選擇越多,所需要作出決定的時間就越長。在人機交互中界面中選項越多,意味著用戶做出決定的時間越長。

3. 神奇數字7±2法則

人類頭腦最好的狀態能記憶含有7(±2)項信息塊,在記憶了 5-9 項信息后就開始失足。與席克定律類似,神奇數字 7±2 法則也經常被應用在移動應用交互設計上,如應用的選項卡不會跨越 5 個。

4. The Law Of Proximity 接近法則

云南体彩网根據格式塔(Gestalt)心理學:當對象離得太近的時候,意識會認為它們是相關的。在交互設計中表示為一個提交按鈕會緊挨著一個文本框,因此當相互靠近的功能塊是不相關的話,就說明交互設計可能是有問題的。

5. Tesler’s Law 泰思勒定律(復雜性守恒定律)

該定律認為每一個過程都有其固有的復雜性,存在一個臨界點,跨越了這個點過程就不克不及再簡化了,你只能將固有的復雜性從一個地方移動到另外一個地方。如對于郵箱的設計,收件人地址是不克不及再簡化的,而對于發件人卻可以通過客戶端的集成來轉移它的復雜性。

6. 新鄉重夫:防錯原則

云南体彩网防錯原則認為大部分的意外都是由設計的疏忽,而不是人為操作疏忽。通過改變設計可以把過失降到最低。該原則最初是用于工業管理的,如在硬件設計上的 USB 插槽。而在界面交互設計中也是可以經常看到,如當使用條件沒有滿足時,經常通過使功能失效來表示(一般按鈕會變為灰色無法點擊),以避免誤按。

7. Occam’s Razor 奧卡姆剃刀原理(簡單有效原理)

這個原理被稱為「如無需要,勿增實體」,即如有兩個功能相等的設計,那么選擇最簡單的。

8. Steering Law 轉向定律

觸控技術(Touch)應用:

  • 0° 方向是最利于操作者移動的方向,具有較好的視覺反饋,勝利率相對最高;
  • 120° 方向用戶在操作時最為困難,在用戶界面交互設計中應盡少使用;
  • 用戶手指在各個方向的運動中,寬度低于 14 像素的 Touch 是用戶體驗最差的。

9. 帕累托定律(80/20原則)

任何大系統中,大部分的效果僅有少數幾項變量決定。用戶 80% 的時間花在了 20% 的功能上。

云南体彩网其實交互定律看起來有點枯燥,生搬硬套其實并紛歧定能套上去,列舉以上的設計原則更多的是為設計做參考,結合設計原則,是提升設計說服力的有效方法。

更多詳細的設計法則和完整案例請查看優設專題 → 《19條經典理論讓你的設計更有說服力!》

完整的原型圖

一套完整且專業的原型圖,除了依照需求文檔設計出所有頁面,串聯頁面以外,還包含一些讓人容易疏忽的地方,因為原型圖所交付的并不只有需求方,還有設計師與開發人員。

1. 原型圖標注,畫開發看得懂的圖

原型圖對于設計師來說,是為了查看產品功能頁面與邏輯路徑。對于開發人員來說,除了產品框架搭建,他們最關心的內容是產品使用中的界限條件、頁面跳轉關系。原型設計時需要畫出功能的所有交互狀態,因此原型圖標注包含:界說好每個標注點的含義和事件,梳理所有對象和邏輯關系,狀態、模塊化區分和標記。

界說好每個標注點的含義和事件

在做交互稿標記之前,界說規范好每個標記的含義,形成統一的規范,使得團隊成員易于理解。如,用水滴表示標注的功能,用圓圈+箭頭的形式來標識頁面跳轉關系。

梳理所有對象和邏輯關系、狀態

下面的原型圖標注以餓了么商家詳情頁結算訂單為例,先用思維腦圖梳理功能狀態,這樣能避免遺漏一些界限條件。

模塊化區分和標記

云南体彩网梳理好狀態后再在原型圖上寫產品用例,每個功能做成一個模塊,有利于往后的維護和迭代。

2. 在同一個頁面展示所有的交互狀態

當項目開始一段時間后,原型里的標注會逐漸變多,很多的開發和設計,沒有耐心看原型圖上的各種標注,所以盡量能一個頁面上顯示出所有的交互狀態,避免設計與開發時看漏。

3. 流程圖,梳理業務邏輯關系

用流程圖梳理產品業務的邏輯關系,常用的流程圖分為單向流程圖和泳道圖(涉及到多個角色)。

云南体彩网單向流程圖一般描述單一角色完成某個任務的整體過程,如登錄注冊過程、支付流程、填寫資料等。

繪制流程圖需要注意以下幾點:

  • 確保產品流程的合理性;
  • 有效轉達需求;
  • 檢驗異常分支。

云南体彩网以上簡單的梳理了一下日常工作設計原型圖中容易讓人忽略的內容。

云南体彩网想要設計繪制更專業的原型圖,可參閱這兩篇文章:

4. 關于原型工具

Axure

官網鏈接:

很有名的原型設計工具,也算是日常工作中最常用的原型工具,成名很早,很多設計師、產品經理都有用它。它除了能夠高效率制作產品原型,快速繪制線框圖、流程圖、網站架構圖、示意圖、HTML 模板外,還支持 java script 交互的實現,并生成 Web 格式上傳到 Axure share 分享瀏覽。

當然,目前市面上有很多種原型工具,例如、、?等,都適合用于原型交互設計。當然選擇哪個工具要看你自己,你的需求是什么,最適合自己工作流程的工具是哪種,有沒有電腦系統的要求等等。

5. 推薦設計應用Figma

官網鏈接:

Figma 是一個完全免費的在線設計軟件,支持 Windows 和 macOS 等多個平臺,是可以讓整個團隊的成員同時查看并修改協作的平臺。使用過 Sketch后,上手 Figma 幾乎沒有難度。

原型設計

在 figma 里面,你可以無縫完成從設計到原型演示的切換,不需要反復同步設計圖到第三方平臺,而且可以利用 Figma Mirror 在手機上預覽效果。單擊播放圖標將進入演示模式,可以在其中實時查看已完成的原型。

實時協作+內置評論

在 Figma 里,設計和協作可以是同時進行的,任何人都可以在設計圖的任何地方添加評論,你可以在評論中@其他人或將評論標記為已解決。

更多關于 Figma 的評測參考:

  1. 《Figma 3.0 版本重磅發布!為你揭秘這款2018年最值得體驗的設計軟件!》
  2. 《從 Sketch 遷移到 Figma 半年后:以為是個青銅結果是個王者?!》
  3. 《想取代 Sketch 的 Figma 好欠好用?我花了一年時間給你謎底!》

注:本系列文章為優設獨家專題,請勿轉載。

歡迎添加作者微信交流:

點贊 1
收藏 329
繼續閱讀相關文章

發表評論 已發布 3

還可以輸入 800 個字
 
 
載入中....
3 收藏