乾貨：iOS APP與小程序UI設計對比

騰訊和蘋果公司都對用戶體驗很是重視，都很擅長產品設計，因此今天就拿小程序和蘋果的HIG（Human Interface Guidelines）作個比較，其實二者在一些大的原則處理上能夠說是一致的。

關鍵詞一：友好禮貌

對應於蘋果：Less is more

蘋果在iOS7時作了一個很是大的界面調整，以突出內容爲主，去除掉了全部會干擾用戶的界面元素，這個風格一致延續至今（以蘋果自家的App，好比指南針，天氣爲例就能夠看出）。

微信在指南一開始也強調了這個原則，並用兩個正反示例加以說明。一是不要在搜索頁面上放置不相關因素，最好放上最近搜索詞，經常使用搜索詞等，二是不要給用戶太多選擇項（如今選擇恐懼症患者愈來愈多）。

關鍵詞二：清晰明確

對應於蘋果：Clarity

蘋果的HIG中三大原則之首就是清晰，這裏面有幾層含義，其中之一就是開發者有義務經過導航欄設置解答用戶的三大疑問：

當前在哪？

能夠往何處去？

去的地方能作什麼？

微信也再次強調了導航設置清晰的重要性，而且直接在微信層面就把當前在哪和如何回去的問題解決了，開發者只要定義好能夠往何處去就OK了，至於導航欄，除了顏色能更改以外，開發者沒什麼能夠作的了。如iOS的狀態欄提供深淺兩種樣式，小程序導航欄也相應有這兩種樣式，和狀態欄融爲一體。

至於選色方案，微信也給出了示例，原則就是要配色和諧，不影響文字的可讀性，這一點其實也是蘋果特別在乎的，建議文本和背景色的對比度要在4.5:1 – 7:1之間。

此外，開發者能夠在微信導航頁面內再嵌一個自有導航欄，但不建議這麼作，若有須要儘可能使用標籤分頁（Tab），有頂部和底部兩種樣式，蘋果對Tab欄的建議是3-5個，微信建議是2-4個，放太多選項不只讓頁面顯得複雜，且不易於用戶操做。

關鍵詞三：反饋及時

對應於蘋果：Responsiveness

微信花費了大量的篇幅強調加載頁面時必需要及時、有反饋，這必定是跟小程序自己的定位有關係，所以基本上能作的都幫開發者作了，比方說啓動頁除了能加個自有logo外，其他元素都不能改動，不少程序內動畫都是微信標準定義的，這一點和iOS原生App的靈活性差異比較大。

然而，二者在大的原則上卻一模一樣，要確保界面對用戶的操做作出及時的相應，哪怕是在加載過程中。因爲小程序要突出輕快的特色，微信重點渲染這一部分就不奇怪了，且詳細經過示例講解了不一樣狀況下的處理建議。

關鍵詞四：便捷優雅

對應於蘋果：User Friendly

微信主要提到了減小輸入和避免誤操做的問題，這和蘋果是高度一致的，不過蘋果提供了更多的控件供選擇。

在減小誤操做方面，蘋果要求全部可觸控的範圍要在44pt以上，而微信更精確，把這個換算成了物理尺寸7mm-9mm之間。

關鍵詞五：視覺規範

對應於蘋果：Legibility

蘋果能夠說對於文本的可讀性要求極高，並於2015年推出了其自有字體SF（San Fransisco），一套專門對此進行了優化的字體，此外，還定義了一套動態字體標準，保證任何人均可以愉悅的在iPhone和iPad上閱讀。

而微信在字體上確定和系統保持一致，其它的考慮和蘋果也是大同小異。不過，爲了保證文本清晰可讀，微信更進一步，直接把各類文本的顏色也定義死了，考慮到和自身的協調性，就連連接字體，出錯字體，完成字體的顏色也都定死了，沒有任何發揮空間。

最後，我也對比了一下二者的控件，微信提供的控件很是「微信」，連尺寸，顏色，字號等都規定好了，沒有什麼可操做的空間，比方說下圖的Button控件，開發者就在這10幾種樣式裏選擇就行了，而相比之下iOS的控件給開發者提供了廣闊的定製空間，這也反映出兩個平臺的不一樣定位。

整體來講，蘋果和微信在UI設計的理念上是相通的，就是簡單、清晰和反饋及時，不過微信在具體的解釋上更加細緻，力圖避免誤解。此外，蘋果三大設計原則中除了Clarity，還有Deference（聽從）和Depth（深度），後二者是微信談的比較少的，這也是二者定位不一樣所致。

相信你們在瞭解了以上信息以後，能夠更加清楚小程序和App之間的差異，從UI層面，小程序界面統一，或者說都長了一副微信的樣子，而App則是千人千面，更加多姿多彩。

息是，對於只把目光放在營銷層面的人，這裏又是另外一個限制。

「H5程序俱樂部」是一個專一微信小程序學習交流，相關外包/招聘需求信息發佈的微信公衆號。

「H5程序俱樂部」微信號：wxappclub 或者 微信掃一掃關注