@Sophia的玲瓏閣 ：這個系列的文章把整個設計過程的經驗總結成文，逐點分享，上期是概述+立項，這期聊聊低保真和高保真原型圖的作用、處理工具和文件要求等。

Low-fi，即低保真原型圖，整個APP設計階段，設計師真正開始上手的環節。待PM制作好PRD文檔和邏輯流程圖之后，交互設計師開始依據已有的結論，畫出Low-fi。

Low-fi的作用

1. 方便團隊進行方案的討論和統一。

就像使用場景Scenario和用戶畫像Personas，團隊每個成員腦海中所理解的都會有所不同，但通過PRD，咱們可以進行至少是大體上的統一。而在這基礎上，APP的具體畫面和流程，每個人都有自己想象的視覺效果。Low-fi就在此時起了相同的作用。

當然統一的進一步促進效果是，進行后面核心功能的深入探討，將概念落實到實施方案，并驗證邏輯上是否能跑通，以及主頁面元素的確定。

2. 方便開發人員進行整體架構的布置，開始著手一些基礎元素的部署。

3. 做出demo進行內部嘗試、小范圍的用戶調查，一般會有一些更改，不會影響項目主方向，大多是功能上的調整

Low-fi 的處理工具與文件要求

作為交互設計師，在Low-fi階段多使用的是sketch，PS更側重于用來做圖片的處理。出發點還是更多的從效率上進行考慮，sketch運行速度非常快，文檔小，測量距離方便，可復用的圖層組（symbol），做好圖之后導出多倍圖也十分方便。所以在此階段做草圖，sketch是不二之選。

然而，對Low-fi的文件處理也有一些要求，主要分為視覺效果和文件名整理。

視覺效果上傾向于使用黑白灰無色彩感的設計方案，目的是為了降低視覺上的干擾，讓設計師和團隊其他成員，將精力重點放到APP本身的功能完善和邏輯完整上面。

而文件名的整理主要表現在圖層命名需要規范。統一的控件用symbol進行管理，symbol的命名建議使用駝峰式，即每個單詞間沒有空格，每個單詞首字母大寫（這里說的是大駝峰式，即第一個單詞的首字母也大寫了）。

Symbol 的分類主要有這幾類：StatusBar、Keyboard、Header、Button、Cards、TabBar、Control、ListItem、Popup等，如果想細分也可以再進行一些細分，比如Popup可以再分出一個細枝為Toast等。

icon類的只能用小寫且不能以數字開頭，不能包含空格。對于 icon，建議對通用模塊再分子類（例如：icons/topnav/; icons/tabbar/; icons/general/…），原則是分類非常符合常識，到了后期icon類的symbol 會非常多，這樣方便快速從一堆 icon 中找到它。

對于Sketch的group管理，建議按照功能模塊進行分類與命名。比方說，video中有VideoPlayer和SingleVideo不同種類，game有GameScore和GameReport等，按照不同的用途進行重組。

這樣的目的是為了，在接下來用一些動態原型工具，比如Flinto或者Origami等等時，方便查找，以及合成圖層組。絕大部分動態原型工具，都是靠渲染圖片來進行展示原型的，圖層越少，電腦效率越高使用越流暢。

文件在Low-fi階段整理地越清晰，設計師頭腦越清晰，High-fi階段越省力。

總的來說，在Low-fi階段是定主體功能和APP雛形的階段，在這一階段，設計師需要幫助團隊統一APP的整體架構，頁面的大體功能模塊分類和跳轉關系，讓APP從大家腦海中的形象落實到真實的視覺效果中。

當項目進行到Hi-fi階段時，設計師會同PM一起開會，經過立項階段，走過Low-fi過程，來到Hi-fi的這一步。在這一系列的相處過程中，大家會遇到問題，然后解決問題，會產生摩擦也會一笑泯恩仇。

注：Hi-fi 是高保真原型圖

這節主要集中于講Hi-fi的主要內容和與PM相處之道。

1. 角色定位與交流主旨

交互設計的角色是幫助、協助PM一起完成產品，不是畫設計圖，也不是切圖，而是幫助團隊一起經歷產品從0到1的整個過程。為什么會在開頭強調這個事，這個決定設計師對自己作品的態度，不是完成任務，作為交換工資的籌碼，而是傾注自己的激情與心血的作品，是自己的一個代表面。

而交流的主旨呢，不是從氣勢上壓倒對方，證明自己的做法是對的，或者說顯示自己多么聰明，而是幫助PM，幫助團隊順利完成產品的開發，產品好，團隊好，對方好，自己才能更好。這就是一種雙贏的思維吧。

2. 工作內容的交流

與任何人的工作內容都包含兩個方面，一方面是對方向你的信息輸入，另一方面你給對方的信息輸出。

PM對交互設計師的信息輸入主要是場景的溝通與對用戶畫像的建立。想講明白一件事，咱們做的產品是給什么人在什么情況下因為要解決什么問題而干了什么事。會有相應的用戶畫像，即對我們的目標用戶進行年齡、職業、興趣愛好等方面信息的確認。

當交互設計師拿到這樣的信息時，最不在狀態的反應就是沒有任何反饋，一切聽從PM的信息傳輸。比較好的做法是，在討論當時就說出自己的疑慮，跟PM進行溝通，最常見的術語是“有沒有考慮過在這種情況下用戶…”、“倘若用戶不這么做，而是…”等等。及時的反饋會幫助PM進行場景上的完善和調整。

當然，這樣的討論過程是個持續輸出的狀態，不管自己做Low-fi還是hi-fi的時候都會遇到，然后自己一邊做一邊想到問題，一遍去問PM。不反饋的話，這些問題在開發的階段都會一個個蹦出來，逃也逃不掉。

PM對設計師另一個信息的輸出就是針對設計稿。首先會設計稿整體對用戶傳達的信息是否有所體現進行refine，接著會對信息是否完整，流程是否通常進行進一步的確認。
3.提供必要的情緒價值

生活的方方面面都是在與人進行溝通，你幫我，我幫你進行解決問題。除了解決工作內容后，如果能學會與人交朋友，讓別人更開心地與你合作，提升同事與你合作的體驗是一件干得特別漂亮的事情。有空再展開這篇進行討論吧，樓主也在鍛煉自己這方面的能力中。

Hi-fi的三個階段

做Hi-fi，說明產品的功能和流程基本確定，產品雛形已經形成，現在拿出Low-fi圖開始進行細致地UI設計，做出精美的商業視覺效果，讓用戶感受到這是一個值得信賴的成熟產品。

Hi-fi大概也可以分為前期、中期和后期三個階段。前期的主要任務是hero screen（主功能頁面）的嘗試設計，通過它進行視覺風格上的確定。包括代表色、代表字體以及它們搭配方案、用法等的確定。

中期，在確定好風格的基礎上進行APP其他頁面的視覺完善，比如輔助功能，頁面的空狀態和無網絡狀態的確定。

后期，繼續完善，抽出時間，來進行創意性以及個性化的設計，這些會是產品的點睛之筆，讓靈魂呼吁而出，比如個性化的loading小動畫，lauch card（啟動頁）等等。

總的來說，設計師先學會做人，然后才能用心體會到做事。敬請期待下期對Hi-fi階段的詳細解析~

藍藍設計( www.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務