網頁設計 ? 交互設計 ? 什么是原型設計?請看這份簡明指南

什么是原型設計?請看這份簡明指南

發表于: 交互設計. 評論
Sponsor

在UI設計中,原型設計并非是自己可有可無的工作環節。很多UI設計師存在一個誤區,認為原型設計是他人的工作,而自己是負責實現的。事實上,這種想法不利于自己的成長和職業發展。今天設計達人和大家分享原型設計的概念和意義,以及如何做出好的原型設計,希望大家對原型設計有更為全面的認識。

什么是原型設計?請看這份簡明指南

一個好產品,離不開好的原型設計。大到產品的整體架構,小到一個功能點的設計,都起源 于原型設計。UI設計師的未來職業發展方向之一是全鏈路設計師或者產品設計師,而優秀的原型設計能力就是必備技能之一。

有人會說:“UI設計師不需要畫原型,那是是產品經理或交互設計師的工作。”這其實是非 常錯誤的觀點。如果想要做出優秀的UI設計,畫原型這一環節也是必不可少的。本文就從多 方面來探討一下原型設計的重要性以及怎樣做出好的原型設計。

一、基礎認知

01. 什么是原型

原型是對一個產品的可視化呈現,主要傳達一個產品的信息架構、內容、功能和交互方式。

它是產品功能和內容的示意圖,一般包括線框圖以及交互說明。原型是產品設計初期供整個 團隊參考、討論、評估的主要依據。之前講過的需求文檔也包含對功能和內容的說明,但原 型并不是簡單地把需求文檔圖形化。

如果在需求分析的前期,設計師能夠和產品經理等人員一同進行產品定位、競品分析和用戶 研究等工作,再根據研究結果、項目資源等情況來篩選和分析需求,加上自己的思考和設計 方法,把需求轉化為設計方案,再細化成線框圖和交互說明,最后形成一份能讓雙方達成共 識的原型文檔。那么設計師接下來的工作就會比較順利地進行下去,并且在團隊中的話語權 也會逐步提升。

02. 為什么要畫原型

原型具有快速創建、聚焦易用性、修改成本低等不可取代的優勢。

快速創建是指設計師不需要考慮太多細節和視覺表現手法,可以快速出圖;聚焦易用性是指 將產品設計的重點放到功能的易用性上,不會被視覺設計所干擾;修改成本低,是指線框圖 比視覺設計稿更容易、更快速地修改,耗時短,效率高。

對于設計師來說,一個好的設計想法,如果沒有清晰、標準的表達方式,其效果會大打折 扣。由于原型可以被快速創建、快速修改的特性,使得產品設計團隊能夠把多種設計方案種 做直觀的對比試驗,可以快速地進行可用性測試并直接地獲得反饋,輕松修改或者放棄某些 設計方案。

對于項目組來說,原型是項目開發的標準和依據,通過設計原型,項目組人員能夠更高地理解產品邏輯,將需求具體化,從而可以量化地評估視覺設計與開發的排期。在這里要注意的 是,原型的使用者不僅僅是視覺設計師和開發工程師,還有測試人員,可能有市場人員、甚 至法務人員等各種不同職能的人員,為了讓這么多種不同的角色都能理解你的設計方案,原型務必要表達得直觀、清楚、規范。

二、進階理念

01. 從最簡單的開始

很多設計師,當接到一個龐大需求的時候,總是沒有思路,以至于遲遲不想打開軟件。由于 需求太多太復雜,給了設計師太多的壓力。其實,萬丈高樓平地起,任何復雜的產品,都是 從基本功能開始的。在這里,有一些很簡單的步驟,可以讓你快速起步:

  1. 頁面上要放置什么功能或內容;
  2. 排列這些功能的優先級;
  3. 如何表現這些功能的優先級;
  4. 依次設計每個部分的具體內容,逐漸增加細節;

02. 不要過分追求精致

設計精致的原型圖固然很好,我們都喜歡精細打磨的設計。但是在設計初期,最好不要陷入 作圖的細節里,人的注意力是有限的,我們應該重點關注功能的位置、類別、順序、層次, 頁面的邏輯關系。有很多優秀的設計師是使用紙和筆快速開始的,在初始的階段,最重要的 是想法,而線框圖的精致程度,不應當成為這一階段所追求的目標。

03. 目的是討論和優化

幾年之前,我參加了阿里某產品設計師的一次講座,他的觀點之一就是:在產品設計的前期 不要怕改稿,原型圖就是用來修改的。

我相信大部分設計師,都不喜歡改稿,但是我們制作原型的目的就是以此為依據進行討論、 修改。否則到了視覺設計、甚至到開發階段再修改,成本會比修改原型大很多。其實設計原 型的階段,有一大半時間是要花在討論、評審和優化上,這也是原型設計的意義所在。

04. 人人都要畫原型圖

一般的產品部門有產品經理、交互設計師、UI設計師這三個角色。當然很多公司沒有專職的 交互設計,只有產品經理和UI設計師,UI設計師同時承擔著交互設計的工作。

產品經理進行需求確認,交互設計師其實在做一種需求翻譯的工作,將產品的商業需求,進 行具象化,并加入一些用戶視角,設計線出框圖。最后由UI設計師產出高保真視覺圖。這三 種角色,在實際工作中,都應該通過畫原型圖,來優化自己的設計。但是,他們畫原型圖的 重點是不同的。

作為產品經理,畫原型圖有時是不可以避免的,產品經理需要通過畫原型來細化思路,理清 產品的功能點、內容塊和業務流程,幫助自己寫好需求文檔,以便更好傳達自己的需求給其 他人員。還有一些概念性項目,需要根據原型來讓老板認可并做決定。

而作為交互設計師,在畫原型圖是需要重點關注一下幾點:

  1. 目標和流程——根據需求和目標,分析用戶的操作流程,并且盡可能地簡化操作流程;
  2. 布局和結構——內容或功能分為幾類,應該采用哪種布局,使其更加易用;
  3. 位置和順序——各個版塊內容應該按照怎樣的順序進行排列,來引導用戶的行為;
  4. 層次和輕重——各版塊、內容的層次該怎樣區分,優先級應該如何排序。

到了視覺階段,UI設計師不管接到多么精致的線框圖原型,也需要重新進行思考,不要當原 型上色師。我們需要結合目標用戶特征、需求以及當下設計趨勢,進行產品的風格定位。有 些時候要改變原型的位置和結構,以達到更好的效果。

要注意的是在修改之前,要同產品經理和交互設計師保持溝通,通過一些自己畫的視覺原型 圖,向他們表達一些視覺設計上的想法,畢竟每個角色都會有自己的知識盲區。當你的修改 意見取得了其他人的認可,就可以根據這一版本的原型,進入視覺設計的階段。

三、設計實踐

01. 原型設計的步驟

在這里我簡要地說明一下原型設計的步驟,在之后的文章中我會展開其中的某一項詳細說 明,請持續關注我之后的內容產出。

① 建立控件庫

控件是指界面中所有的最小元件。

例如:按鈕、圖標、文本框、單選框、復選框、開關、圖片占位符等控件。

② 建立組件庫

組件是一種功能模塊,它能夠被重復使用,從而提升設計效率,并且可以保持界面的一致性 和規范性。

例如:圖文列表、圖文卡片、表格、篩選條件、文件上傳、系統反饋、彈出框等組件。

③ 繪制流程圖

流程圖表達的是一個用戶的操作過程,通常我們基于普通用戶,如果時間和資源允許,也可 以繪制特殊用戶的操作流程圖。流程圖的作用在于梳理和規范流程,在繪制流程圖時,我們 要注意邏輯的清晰和完整,每一個流程分支都代表著用戶的一個決策節點,需要我們進行深 入地思考和設計。

④ 設計關鍵頁面

例如:首頁、詳情頁、個人中心、設置等頁面

⑤ 設計輔助頁面

例如:注冊登陸頁、找回密碼等頁面

⑥ 設計關鍵功能故事板

故事板,顧名思義就是講故事的板子。故事板可以幫助我們將用戶角色,使用場景和使用流 程串聯起來,將抽象的體驗過程具象成圖文結合的形式,使團隊成員可以通過某個角色來觀 察我們關鍵功能的使用場景,并觀察用戶的操作的流程,使產品設計師能夠對用戶體驗進行 更直觀和深入的挖掘和思考。

故事板三要素:角色、場景、情節。角色要說明包含幾類用戶群體;場景要說明包括幾種使 用場景;情節要說明用戶目標、觸發事件、行為流程和行為結果。

⑦ 原型注釋與交互說明

原型設計文檔必須包含清晰的注釋和交互說明。控件的不同狀態、鏈接的指向、頁面的跳 轉、操作的結果、報錯信息及其展示方式等交互說明內容,都需要在原型注釋中用文字準確 的描述出來。

02. 原型設計的注意事項

我們在做原型設計時,要把原型的閱讀者想象成對產品和設計一無所知的人,該怎樣圖文并 茂的展示產品的邏輯和功能,才能夠讓其通過原型來理解這個產品,需要注意以下幾點:

  1. 使用灰度線框圖:顏色和視覺效果會影響大家對易用性的判斷;
  2. 清晰地展示流程:順暢的操作流程是產品易用性最基本的標準。
  3. 關鍵功能要有故事板:角色、場景、情節,使團隊人員更快、更好地理解產品。
  4. 要有注釋和說明:圖文并茂更能準確傳達設計方案與想法。
  5. 一致性和規范性:優秀原型的元素、組件、頁面甚至是文案用語的調性都規范一致的。

四、結語

本文從原型設計的基礎認知到進階理念,最后到設計實踐,從多方面探討了原型設計在整個 產品研發流程中的重要意義,以及該如何做出好的原型設計。寫到最后,我發現還有很多要 展開詳細講的內容。在之后的文章中,我會持續地產出更多關于產品、交互方面的知識,以 及作為一名優秀的UI設計師應具備的多種設計能力。讓我們一起成長進階吧。

感謝閱讀~

作者:UX_Milk,個人主頁:https://www.zcool.com.cn/u/2296261

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

{ 發表評論 }