年初小程序即將發(fā)布時(shí)，幾乎所有的互聯(lián)網(wǎng)從業(yè)人員都會(huì )討論甚至希望在波浪潮里能有所為，打開(kāi)一個(gè)新的局面。2017年已過(guò)大半，小程序只悄聲作為一些產(chǎn)品的附加入口。

　　灰評是一個(gè)客觀(guān)評價(jià)商品的UGC產(chǎn)品，我們趕上了波小程序的浪潮，而且產(chǎn)品本身是個(gè)試研發(fā)的產(chǎn)品，所以產(chǎn)品設計上就是一個(gè)產(chǎn)品+一個(gè)視覺(jué)，繼而有幸參與了很多交互上的設計。

　　從頁(yè)由上往下看灰評的主要體驗流程：

　　搜索——搜索你想要查看的商品或者品牌

　　測評文章——瀏覽當下熱點(diǎn)商品的評測

　　查看/添加清單——查看自己已經(jīng)列出的商品清單或者新建清單

　　我的積分——查看積分、累積積分和使用積分

　　商品評價(jià)列表——查看當下熱點(diǎn)商品的評價(jià)

　　小程序本身的特點(diǎn)決定它設計上的特殊性：

　　因為不需要安裝，占用內存空間忽略不計；但掃描二維碼時(shí)要方便加載，所以要盡量控制本地數據、精簡(jiǎn)界面控件，做減法設計。不然加載失敗很有可能是空白頁(yè)面，為此我們還做了預加載的界面，防止加載失敗后太尷尬。

　　一次開(kāi)發(fā)多終端適配。因為產(chǎn)品的性質(zhì)，我們定位的用戶(hù)是較高端小眾，所以設計上是以蘋(píng)果iPhone6/iPhone7尺寸為準，在手機尺寸上屬于中等大小，為了能盡量在各種終端清晰良好顯示，在界面上的圖像元素選擇是：簡(jiǎn)單形狀＞多種效果形狀＞攝影圖，也就是要求設計元素盡量單純。

　　小程序的設計都是在微信的大環(huán)境里做的，相對于A(yíng)PP的8、9年開(kāi)發(fā)歷程，有很多效果（如某些動(dòng)畫(huà)）是不成熟無(wú)法實(shí)現的，就規模大如大眾點(diǎn)評，小程序上功能也很少。

　　總的來(lái)講就是比普通的APP更講究扁平化的設計，把它當作非常重要的準則。產(chǎn)品設計在在視覺(jué)上要表現的輕盈、干凈、效率高；功能層級上要結構單純、跳轉少、層級簡(jiǎn)單；其次要高效率地展現內容，設計風(fēng)格統一和諧。

　　輕視覺(jué)

　　視覺(jué)上的輕盈是當其沖的，給用戶(hù)的直觀(guān)感受會(huì )影響用戶(hù)次的體驗。

　　1.1弱化次要功能

　　在產(chǎn)品不斷迭代的過(guò)程中，有些功能會(huì )逐漸邊緣化，這在視覺(jué)處理上要有明確的表示。

　　由于是新產(chǎn)品，數據量比較少，能搜索到的東西比較有限，所以搜索的功能是逐漸變弱的，尤其是當頁(yè)面出現了文章、積分等內容后，搜索就要更要弱化顯示。所以搜索由原來(lái)的的搜索框逐漸變成了一個(gè)右上角的icon。有搜索需求的時(shí)候可以找到，但是對平時(shí)的瀏覽不會(huì )有打擾。

　　1.2去除冗余減少線(xiàn)條

　　其實(shí)這屬于扁平化視覺(jué)的處理，去除邊界和明顯的區隔，跟多是讓內容本身來(lái)展現和區隔。

　　舊版卡片列表、新版細線(xiàn)列表

　　舊版隨便看看列表：原來(lái)是構想出刷新上下翻轉的動(dòng)效，但是由于小程序的限制無(wú)法實(shí)現這種動(dòng)畫(huà)效果，如果沒(méi)有動(dòng)畫(huà)效果那么這種卡片+投影的表現方式完全可以由更簡(jiǎn)單的形狀代替；

　　新版的隨便看看列表：由原來(lái)的3張圓角卡片變成了整塊細線(xiàn)分隔列表，這樣會(huì )減少粗線(xiàn)條帶來(lái)的割裂感，讓這塊內容更整體精致、輕盈；

　　撰寫(xiě)評價(jià)頁(yè)面本身內容復雜，而且從上到下的內容都需要用戶(hù)去編輯填充，繼而使頁(yè)面清晰、主次分明就更重要。

　　星級和長(cháng)評論的變化

　　所以界面整體先去掉了用戶(hù)已知的商品信息；長(cháng)評論輸入區域去掉了外框線(xiàn)的束縛，用自身文字塊和空間隔開(kāi)文字和圖片；

　　頂部的星級是對當前商品的整體評級，所以與下方其他評價(jià)用色塊區分開(kāi)，并且星星的造型也由原來(lái)的細線(xiàn)框式變成了淺色塊，整個(gè)頁(yè)面整體感變強，強調主次。

　　1.3視覺(jué)統一輕松操作

　　個(gè)人認為，界面中視覺(jué)效果高度統一會(huì )讓頁(yè)面清晰協(xié)調，用戶(hù)在操作過(guò)程中認知成本低，使用起來(lái)簡(jiǎn)單輕松。

　　從搜索到添加，以及詳情頁(yè)的上滑標題位置，界面高度統一

　　在添加寶貝到清單的操作中，因為創(chuàng )建清單、搜索寶貝、添加寶貝等頁(yè)面結構基本是一致的，并且在操作流程上是連續的；而在標題上，與清單詳情的標題也是一致的。所以視覺(jué)上就保持了標題樣式的高度統一，創(chuàng )建清單控件和搜索框也在高度上保持了統一，給用戶(hù)在略復雜的搜索添加流程上有個(gè)較好的體驗。

　　輕交互

　　2.1優(yōu)化標簽編輯邏輯

　　寫(xiě)標簽是灰評區別于其他測評軟件的一個(gè)標志，所以在初期寫(xiě)標簽是個(gè)非常重要且值得強調的功能。

　　舊版輸入標簽流程

　　先寫(xiě)評價(jià)的整體流程如上圖所示，只有后兩步涉及到復雜的交互邏輯，具體就可以參考豆瓣的寫(xiě)觀(guān)影評價(jià)標簽的方式。但這個(gè)難點(diǎn)在于產(chǎn)品初期用戶(hù)和數據都較少，用戶(hù)能選擇的標簽少，要填寫(xiě)的比較多；而且一般是要寫(xiě)好、差評兩種，彈框式的操作就會(huì )讓用戶(hù)來(lái)回在界面和彈框間往返，又因為小程序的環(huán)境問(wèn)題，彈框上輸入文字的體驗并不好，并且網(wǎng)頁(yè)鏈接上的彈框也顯得厚重。

　　舊版：寫(xiě)新標簽都要有個(gè)點(diǎn)擊-選擇好/差評-輸入標簽-確定然后回到寫(xiě)評價(jià)的頁(yè)面，并且每次輸入標簽時(shí)，鍵盤(pán)彈起會(huì )頂起彈框界面閃動(dòng)。

　　新版標簽的輸入方法

　　新版：

　　點(diǎn)擊”+新標簽”——-頁(yè)面底部會(huì )彈起輸入框

　　滑動(dòng)選擇填寫(xiě)好評或者差評——-右邊輸入框相應變黃色或者灰色

　　輸入評價(jià)文字——–右邊的收起箭頭變成發(fā)送按鈕

　　點(diǎn)擊空白區域——–整條輸入tab消失，露出原來(lái)的發(fā)出去按鈕

　　好壞差評的選擇由復雜的圖形設計變成了簡(jiǎn)單形狀的開(kāi)關(guān)形式，好壞標簽的顏色+對應文字可直觀(guān)的表現其屬性；發(fā)出去按鈕和收起icon由框內文字的有無(wú)來(lái)切換。優(yōu)化后可以連續輸入并看到當前的輸入情況，減少每次寫(xiě)標簽的繁瑣過(guò)程和彈框的彈跳突兀感，整個(gè)流程也會(huì )更統一。

　　2.2復用位置靈活變化減輕頁(yè)面

　　在一些內容較多的頁(yè)面，編輯或者滑動(dòng)時(shí)，能靈活把控一些控件的變換可以有效利用有限的空間而不影響操作體驗，但前提是控件變化后不影響操作使用。

　　清單詳情頁(yè)常態(tài)、清單詳情頁(yè)編輯態(tài)

　　在清單詳情頁(yè)，編輯狀態(tài)下有很多地方可以改變，并且不僅是單純的刪除。如果是在底部加個(gè)tab按鈕來(lái)操作，一次很難編輯所有的需求，并且也會(huì )讓頁(yè)面變的厚重。而點(diǎn)擊編輯后，商品的排名標識是不需要的，收起和點(diǎn)評也可以暫時(shí)擱置，所以變換商品刪除操作是復用排名形式和位置，能感受到變化但不會(huì )有多少突兀感；列表中的編輯和置頂icon復用原來(lái)控件的位置并且保持大的間距以免誤操作。

　　清單詳情頁(yè)屏、清單詳情頁(yè)下滑

　　在瀏覽清單詳情頁(yè)下滑時(shí)，因為仍然要保持清單標題的可編輯性，所以設置清單標題和其他操作停留在黑色的標題欄上，確保統一清晰的展示并且方便編輯。

　　反思點(diǎn)

　　3.1不能跳出產(chǎn)品給的框架做突破性的、根本性的總結

　　好壞標簽是本產(chǎn)品的靈魂、基礎，區別于其他評價(jià)類(lèi)產(chǎn)品的本質(zhì)。

　　在初產(chǎn)品經(jīng)理的意思是把標簽分為兩類(lèi)，并標上好、壞的的標識以及過(guò)長(cháng)的好評度進(jìn)度條。這種方式先是笨拙的，設計度不高：進(jìn)度條樣式的展示比較適合多類(lèi)對比（比如蓋得排行），對于一種產(chǎn)品的話(huà)有更直接更精簡(jiǎn)的方式；再者對標簽標上好壞的字樣，是比較生硬低效的歸類(lèi)，應該讓它本身的樣式來(lái)讓用戶(hù)輕易區別其屬性（比如你不能給好、壞人貼上標簽）；而正負面評價(jià)分開(kāi)展示不利于排版優(yōu)化。

　　舊版、新版好差評標簽展示

　　標簽混合展示并且視覺(jué)優(yōu)化后，找了10人左右做了對色彩對應的屬性訪(fǎng)問(wèn)，幾乎所有人都能很快的說(shuō)出黃色、灰色對應的標簽屬性，并且對評分設計也更能接受。

　　3.2作為視覺(jué)想急于表現喜愛(ài)的形式感而忽略?xún)热菡故?br />

　　作為視覺(jué)設計，可能都有一種終于有機會(huì )發(fā)表自己喜愛(ài)的形式的感受，但在具體的產(chǎn)品設計中不一定合適，在形式感和內容顯示上做了錯誤的取舍。當然，經(jīng)過(guò)更久推敲或許也會(huì )有更優(yōu)的解決方案。

　　舊版、新版分享頁(yè)

　　舊版：特別癡迷于所有元素居中的排版方式，會(huì )感覺(jué)比較大氣唯美；但是在本產(chǎn)品中經(jīng)過(guò)居中的排版難以在手機的屏中展示出標簽和長(cháng)評論，占據篇幅的不是是標簽而是已知的商品信息；

　　新版：界面上部采用左對齊版式，圖片、logo、名稱(chēng)和星級組合在左上角；左對齊的標簽大限度的呈現標簽（多10條10個(gè)字的標簽）圖片和長(cháng)評論下面居中顯示；圖標簡(jiǎn)化成清晰簡(jiǎn)明的按鈕。改版后可以在屏呈現出所有的標簽、配圖及部分長(cháng)評論。規整內容，后一版的內容是較多的，但是也是比較整齊干凈的。

http://ezekroy.com/jianzhanzhishi/6712.html 微信小程序輕設計復盤(pán)-深圳微信開(kāi)發(fā)