如何給小程序做設(shè)計(jì)？來看網(wǎng)易高手的設(shè)計(jì)實(shí)戰(zhàn)案例！

網(wǎng)易UEDC – 張培培 ：年初小程序即將發(fā)布時(shí)，幾乎所有的互聯(lián)網(wǎng)從業(yè)人員都會討論甚至盼望在第一波浪潮里能有所為，打開一個新的局面。2017年已過大半，小程序只悄聲作為一些產(chǎn)品的附加入口。然而作為第一批試水的設(shè)計(jì)師，我或允許以分享一點(diǎn)本身對一款小程序打磨的經(jīng)驗(yàn)。

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

從首頁由上往下看灰評的重要體驗(yàn)流程：

• 搜索——搜索你想要查看的商品或者品牌
• 測評文章——欣賞當(dāng)下熱點(diǎn)商品的評測
• 查看/添加清單——查看本身已經(jīng)列出的商品清單或者新建清單
• 我的積分——查看積分、累積積分和使用積分
• 商品評價(jià)列表——查看當(dāng)下熱點(diǎn)商品的評價(jià)

小程序自己的特點(diǎn)決定它設(shè)計(jì)上的特別性：

• 由于不必要安裝，占用內(nèi)存空間忽略不計(jì)；但掃描二維碼時(shí)要方便加載，所以要盡量控制本地?cái)?shù)據(jù)、精簡界面控件，做減法設(shè)計(jì)。不然加載失敗很有可能是空白網(wǎng)頁，為此我們還做了預(yù)加載的界面，防止加載失敗后太難堪。
• 一次開發(fā)多終端適配。由于產(chǎn)品的性子，我們定位的用戶是較高端小眾，所以設(shè)計(jì)上是以蘋果iPhone6/iPhone7尺寸為準(zhǔn)，在手機(jī)尺寸上屬于中等大小，為了能盡量在各種終端清晰優(yōu)秀表現(xiàn)，在界面上的圖像元素選擇是：簡單外形＞多種結(jié)果外形＞攝影圖，也就是要求設(shè)計(jì)元素盡量單純。
• 小程序的設(shè)計(jì)都是在微信的大環(huán)境里做的，相對于APP的8、9年開發(fā)歷程，有許多結(jié)果（如某些動畫）是不成熟無法實(shí)現(xiàn)的，就規(guī)模大如大眾點(diǎn)評，小程序上功能也很少。

總的來講就是比通俗的APP更講究扁平化的設(shè)計(jì)，把它當(dāng)作特別很是緊張的準(zhǔn)則。產(chǎn)品設(shè)計(jì)在視覺上要體現(xiàn)的輕盈、干凈、服從高；功能層級上要結(jié)構(gòu)單純、跳轉(zhuǎn)少、層級簡單；其次要高服從地顯現(xiàn)內(nèi)容，設(shè)計(jì)風(fēng)格同一協(xié)調(diào)。

一. 輕視覺

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

弱化次要功能

在產(chǎn)品賡續(xù)迭代的過程中，有些功能會漸漸邊緣化，這在視覺處理上要有明確的透露表現(xiàn)。

因?yàn)槭切庐a(chǎn)品，數(shù)據(jù)量比較少，能搜索到的東西比較有限，所以搜索的功能是漸漸變?nèi)醯模绕涫钱?dāng)網(wǎng)頁出現(xiàn)了文章、積分等內(nèi)容后，搜索就更要弱化表現(xiàn)。所以搜索由原來的搜索框漸漸變成了一個右上角的icon。有搜索需求的時(shí)候可以找到，但是對平時(shí)的欣賞不會有打攪。

去除冗余削減線條

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

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

• 舊版隨便看看列表：原來是構(gòu)想出刷新上下翻轉(zhuǎn)的動效，但是因?yàn)樾〕绦虻南薅o法實(shí)現(xiàn)這種動畫結(jié)果，假如沒有動畫結(jié)果那么這種卡片+投影的體現(xiàn)體例完全可以由更簡單的外形代替。
• 新版的隨便看看列表：由原來的3張圓角卡片變成了整塊細(xì)線分隔列表，如許會削減粗線條帶來的割裂感，讓這塊內(nèi)容更團(tuán)體細(xì)膩、輕盈。

撰寫評價(jià)網(wǎng)頁自己內(nèi)容復(fù)雜，而且從上到下的內(nèi)容都必要用戶去編輯添補(bǔ)，繼而使網(wǎng)頁清晰、主次分明就更緊張。

△ 星級和長評論的轉(zhuǎn)變

所以界面團(tuán)體首先去掉了用戶已知的商品信息；長評論輸入?yún)^(qū)域去掉了外框線的約束，用自身筆墨塊和空間隔開筆墨和圖片；

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

視覺同一輕松操作

小我認(rèn)為，界面中視覺結(jié)果高度同一會讓網(wǎng)頁清晰和諧，用戶在操作過程中認(rèn)知成本低，使用起來簡單輕松。

△ 從搜索到添加，以及詳情頁的上滑題目位置，界面高度同一。

在添加寶貝到清單的操作中，由于創(chuàng)建清單、搜索寶貝、添加寶貝等網(wǎng)頁結(jié)構(gòu)基本是同等的，并且在操作流程上是延續(xù)的。而在題目上，與清單詳情的題目也是同等的。所以視覺上就保持了題目樣式的高度同一，創(chuàng)建清單控件和搜索框也在高度上保持了同一，給用戶在略復(fù)雜的搜索添加流程上有個較好的體驗(yàn)。

二. 輕交互

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

寫標(biāo)簽是灰評區(qū)別于其他測評軟件的一個標(biāo)志，所以在初期寫標(biāo)簽是個特別很是緊張且值得強(qiáng)調(diào)的功能。

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

首先寫評價(jià)的團(tuán)體流程如上圖所示，只有后兩步涉及到復(fù)雜的交互邏輯，詳細(xì)就可以參考豆瓣的寫觀影評價(jià)標(biāo)簽的體例。但這個難點(diǎn)在于產(chǎn)品初期用戶和數(shù)據(jù)都較少，用戶能選擇的標(biāo)簽少，要填寫的比較多；而且一樣平常是要寫好、差評兩種，彈框式的操作就會讓用戶往返在界面和彈框間來回，又由于小程序的環(huán)境題目，彈框上輸入筆墨的體驗(yàn)并不好，并且頁面鏈接上的彈框也顯得厚重。

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

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

新版：

• 點(diǎn)擊+新標(biāo)簽——-網(wǎng)頁底部會彈起輸入框
• 滑動選擇填寫好評或者差評——-右邊輸入框響應(yīng)變黃色或者灰色
• 輸入評價(jià)筆墨——–右邊的收起箭頭變成發(fā)送按鈕
• 點(diǎn)擊空白區(qū)域——– 整條輸入tab消散，露出原來的發(fā)出去按鈕

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

復(fù)用位置天真轉(zhuǎn)變減輕網(wǎng)頁

在一些內(nèi)容較多的網(wǎng)頁，編輯或者滑動時(shí)，能天真把控一些控件的變換可以有用行使有限的空間而不影響操作體驗(yàn)，但前提是控件轉(zhuǎn)變后不影響操作使用。

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

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

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

在欣賞清單詳情頁下滑時(shí)，由于仍然要保持清單題目的可編輯性，所以設(shè)置清單題目和其他操作停頓在黑色的題目欄上，確保同一清晰的展示并且方便編輯。

三. 反思點(diǎn)

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

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

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

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

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

作為視覺想急于體現(xiàn)喜好的情勢感而忽略內(nèi)容展示

作為視覺設(shè)計(jì)，可能都有一種終于有機(jī)會發(fā)表本身喜好的情勢的感受，但在詳細(xì)的產(chǎn)品設(shè)計(jì)中不肯定合適，在情勢感和內(nèi)容表現(xiàn)上做了錯誤的取舍。當(dāng)然，經(jīng)過更久推敲或許也會有更優(yōu)的解決方案。

△ 舊版、新版分享頁

• 舊版：分外癡迷于所有元素居中的排版體例，會感覺比較大氣唯美；但是在本產(chǎn)品中經(jīng)過居中的排版難以在手機(jī)的首屏中展示出標(biāo)簽和長評論，占有篇幅的不是標(biāo)簽而是已知的商品信息。
• 新版：界面上部采用左對齊版式，圖片、Logo、名稱和星級組合在左上角；左對齊的標(biāo)簽最大限度的呈現(xiàn)標(biāo)簽（最多10條10個字的標(biāo)簽）圖片和長評論下面居中表現(xiàn)；圖標(biāo)簡化成清晰簡明的按鈕。改版后可以在第一屏呈現(xiàn)出所有的標(biāo)簽、配圖及部分長評論。規(guī)整內(nèi)容，最后一版的內(nèi)容是較多的，但是也是比較劃一干凈的。

總結(jié)

很幸運(yùn)能趕在小程序的第一批浪潮發(fā)布本身設(shè)計(jì)的產(chǎn)品，雖然小程序的將來和本產(chǎn)品的將來都未可知，但是在設(shè)計(jì)探索的過程中成長是飛快的，也感謝我的同事給了我許多意見和體驗(yàn)感受，尤其是經(jīng)常給我啟發(fā)的產(chǎn)品經(jīng)理，其中的設(shè)計(jì)感悟和戰(zhàn)勝難點(diǎn)的方法盼望可以給其他人帶來些許幫助。

迎接關(guān)注作者「網(wǎng)易UEDC」的微信公眾號：