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從大家腦海中的形象落實到真實的視覺效果中~
敬請期待下期分享~
Sophia的tips:
雖然只是low-fi,卻也需要吃毛求疵般的職業態度~
相關文章
《創業公司設計師怎樣從0到1設計一款APP(二)——立項》
《創業公司設計師怎樣從0到1設計一款APP(一)——概述》