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

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

　　從頁由上往下看灰評(píng)的主要體驗(yàn)流程：

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

　　測(cè)評(píng)文章——瀏覽當(dāng)下熱點(diǎn)商品的評(píng)測(cè)

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

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

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

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

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

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

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

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

　　輕視覺

　　視覺上的輕盈是當(dāng)其沖的，給用戶的直觀感受會(huì)影響用戶次的體驗(yàn)。

　　1.1弱化次要功能

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

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

　　1.2去除冗余減少線條

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

　　舊版卡片列表、新版細(xì)線列表

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

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

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

　　星級(jí)和長(zhǎng)評(píng)論的變化

　　所以界面整體先去掉了用戶已知的商品信息；長(zhǎng)評(píng)論輸入?yún)^(qū)域去掉了外框線的束縛，用自身文字塊和空間隔開文字和圖片；

　　頂部的星級(jí)是對(duì)當(dāng)前商品的整體評(píng)級(jí)，所以與下方其他評(píng)價(jià)用色塊區(qū)分開，并且星星的造型也由原來的細(xì)線框式變成了淺色塊，整個(gè)頁面整體感變強(qiáng)，強(qiáng)調(diào)主次。

　　1.3視覺統(tǒng)一輕松操作

　　個(gè)人認(rèn)為，界面中視覺效果高度統(tǒng)一會(huì)讓頁面清晰協(xié)調(diào)，用戶在操作過程中認(rèn)知成本低，使用起來簡(jiǎn)單輕松。

　　從搜索到添加，以及詳情頁的上滑標(biāo)題位置，界面高度統(tǒng)一

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

　　輕交互

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

　　寫標(biāo)簽是灰評(píng)區(qū)別于其他測(cè)評(píng)軟件的一個(gè)標(biāo)志，所以在初期寫標(biāo)簽是個(gè)非常重要且值得強(qiáng)調(diào)的功能。

　　舊版輸入標(biāo)簽流程

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

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

　　新版標(biāo)簽的輸入方法

　　新版：

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

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

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

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

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

　　2.2復(fù)用位置靈活變化減輕頁面

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

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

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

　　清單詳情頁屏、清單詳情頁下滑

　　在瀏覽清單詳情頁下滑時(shí)，因?yàn)槿匀灰３智鍐螛?biāo)題的可編輯性，所以設(shè)置清單標(biāo)題和其他操作停留在黑色的標(biāo)題欄上，確保統(tǒng)一清晰的展示并且方便編輯。

　　反思點(diǎn)

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

　　好壞標(biāo)簽是本產(chǎn)品的靈魂、基礎(chǔ)，區(qū)別于其他評(píng)價(jià)類產(chǎn)品的本質(zhì)。

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

　　舊版、新版好差評(píng)標(biāo)簽展示

　　標(biāo)簽混合展示并且視覺優(yōu)化后，找了10人左右做了對(duì)色彩對(duì)應(yīng)的屬性訪問，幾乎所有人都能很快的說出黃色、灰色對(duì)應(yīng)的標(biāo)簽屬性，并且對(duì)評(píng)分設(shè)計(jì)也更能接受。

　　3.2作為視覺想急于表現(xiàn)喜愛的形式感而忽略內(nèi)容展示

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

　　舊版、新版分享頁

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

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

網(wǎng)頁設(shè)計(jì)

• 2020-11-11微信小程序新能力：附近的小程序、成員管理功能升級(jí)
• 2020-11-11微信小程序外部引入方法
• 2020-11-09微信小程序開發(fā)用什么語言？
• 2020-11-11微信小程序更加開放：可共享到微信群
• 2020-11-11騰訊微信小程序升級(jí)用戶信息和UnionID獲取方式
• 2020-11-09微信小程序開發(fā)需要注意哪些事項(xiàng)
• 2020-11-11微信小程序上線在即 小程序價(jià)值在那
• 2020-11-09微信小程序?yàn)槭裁词瞧髽I(yè)必須要開發(fā)的？
• 2020-11-09淺析電商類微信小程序開發(fā)事項(xiàng)
• 2020-11-11微信小程序升級(jí)后：豐富內(nèi)容展示組件
• 2020-11-09教育培訓(xùn)行業(yè)如何開發(fā)微信小程序
• 2020-11-11微信小程序頁面開發(fā)注意事項(xiàng)整理