小程序如何制作，免費自制小程序教程

年初小程序即將發布時，幾乎所有的互聯網從業人員都會討論甚至希望在第一波浪潮里能有所為，打開一個新的局面。2017年已過大半，小程序只悄聲作為一些產品的附加入口。然而作為第一批試水的設計師，我或許可以分享一點自己對一款小程序打磨的經驗。

灰評是一個客觀評價商品的UGC產品，我們趕上了第一波小程序的浪潮，而且產品本身是個試研發的產品，所以產品設計上就是一個產品+一個視覺，繼而有幸參與了很多交互上的設計。

從首頁由上往下看灰評的主要體驗流程：

• 搜索——搜索你想要查看的商品或者品牌
• 測評文章——瀏覽當下熱點商品的評測
• 查看/添加清單——查看自己已經列出的商品清單或者新建清單
• 我的積分——查看積分、累積積分和使用積分
• 商品評價列表——查看當下熱點商品的評價

小程序本身的特點決定它設計上的特殊性：

• 因為不需要安裝，占用內存空間忽略不計；但掃描二維碼時要方便加載，所以要盡量控制本地數據、精簡界面控件，做減法設計。不然加載失敗很有可能是空白頁面，為此我們還做了預加載的界面，防止加載失敗后太尷尬。
• 一次開發多終端適配。因為產品的性質，我們定位的用戶是較高端小眾，所以設計上是以蘋果iPhone6/iPhone7尺寸為準，在手機尺寸上屬于中等大小，為了能盡量在各種終端清晰良好顯示，在界面上的圖像元素選擇是：簡單形狀＞多種效果形狀＞攝影圖，也就是要求設計元素盡量單純。
• 小程序的設計都是在微信的大環境里做的，相對于APP的8、9年開發歷程，有很多效果（如某些動畫）是不成熟無法實現的，就規模大如大眾點評，小程序上功能也很少。

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

一. 輕視覺

視覺上的輕盈是首當其沖的，給用戶的直觀感受會影響用戶首次的體驗。

弱化次要功能

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

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

去除冗余減少線條

其實這屬于扁平化視覺的處理，去除邊界和明顯的區隔，更多是讓內容本身來展現和區隔。

△ 舊版卡片列表、新版細線列表

• 舊版隨便看看列表：原來是構想出刷新上下翻轉的動效，但是由于小程序的限制無法實現這種動畫效果，如果沒有動畫效果那么這種卡片+投影的表現方式完全可以由更簡單的形狀代替。
• 新版的隨便看看列表：由原來的3張圓角卡片變成了整塊細線分隔列表，這樣會減少粗線條帶來的割裂感，讓這塊內容更整體精致、輕盈。

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

△ 星級和長評論的變化

所以界面整體首先去掉了用戶已知的商品信息；長評論輸入區域去掉了外框線的束縛，用自身文字塊和空間隔開文字和圖片；

頂部的星級是對當前商品的整體評級，所以與下方其他評價用色塊區分開，并且星星的造型也由原來的細線框式變成了淺色塊，整個頁面整體感變強，強調主次。

視覺統一輕松操作

個人認為，界面中視覺效果高度統一會讓頁面清晰協調，用戶在操作過程中認知成本低，使用起來簡單輕松。

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

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

二. 輕交互

優化標簽編輯邏輯

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

△ 舊版輸入標簽流程

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

舊版：寫新標簽都要有個點擊-選擇好/差評-輸入標簽-確定，然后回到寫評價的頁面，并且每次輸入標簽時，鍵盤彈起會頂起彈框界面閃動。

△ 新版標簽的輸入方法

新版：

• 點擊+新標簽——-頁面底部會彈起輸入框
• 滑動選擇填寫好評或者差評——-右邊輸入框相應變黃色或者灰色
• 輸入評價文字——–右邊的收起箭頭變成發送按鈕
• 點擊空白區域——– 整條輸入tab消失，露出原來的發出去按鈕

好壞差評的選擇由復雜的圖形設計變成了簡單形狀的開關形式，好壞標簽的顏色+對應文字可直觀的表現其屬性，發出去按鈕和收起icon由框內文字的有無來切換。優化后可以連續輸入并看到當前的輸入情況，減少每次寫標簽的繁瑣過程和彈框的彈跳突兀感，整個流程也會更統一。

復用位置靈活變化減輕頁面

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

△ 清單詳情頁常態、清單詳情頁編輯態

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

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

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

三. 反思點

不能跳出產品給的框架做突破性的、根本性的總結

好壞標簽是本產品的靈魂、基礎，區別于其他評價類產品的本質。

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

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

標簽混合展示并且視覺優化后，找了10人左右做了對色彩對應的屬性訪問，幾乎所有人都能很快的說出黃色、灰色對應的標簽屬性，并且對評分設計也更能接受。

作為視覺想急于表現喜愛的形式感而忽略內容展示

作為視覺設計，可能都有一種終于有機會發表自己喜愛的形式的感受，但在具體的產品設計中不一定合適，在形式感和內容顯示上做了錯誤的取舍。當然，經過更久推敲或許也會有更優的解決方案。

△ 舊版、新版分享頁

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

總結

很榮幸能趕在小程序的第一批浪潮發布自己設計的產品，雖然小程序的未來和本產品的未來都未可知，但是在設計探索的過程中成長是飛快的，也感謝我的同事給了我很多意見和體驗感受，尤其是經常給我啟發的產品經理，其中的設計感悟和克服難點的方法希望可以給其他人帶來些許幫助。