雷鋒網(wǎng)按：作者沙銘，OOPSING咨詢創(chuàng)始人，推廣圈里懂編程、碼農(nóng)圈里懂推廣的蘋(píng)果專(zhuān)家。

自從做了自媒體之后，就有了職業(yè)病，看到熱點(diǎn)就想追，這病得治！

雖然我研究蘋(píng)果比較多，但是大家總是把小程序和App放在一起比，因此我也花時(shí)間看了一下小程序的開(kāi)發(fā)指南，尤其是UI部分的設(shè)計(jì)和原則，今天就拿它和蘋(píng)果的HIG（Human Interface Guidelines）做個(gè)比較，其實(shí)兩者在一些大的原則處理上可以說(shuō)是一致的。

關(guān)鍵詞一：友好禮貌

對(duì)應(yīng)于蘋(píng)果：Less is more

蘋(píng)果在iOS7時(shí)做了一個(gè)非常大的界面調(diào)整，以突出內(nèi)容為主，去除掉了所有會(huì)干擾用戶的界面元素，這個(gè)風(fēng)格一致延續(xù)至今（以蘋(píng)果自家的App，比如指南針，天氣為例就可以看出）。

微信在指南一開(kāi)始也強(qiáng)調(diào)了這個(gè)原則，并用兩個(gè)正反示例加以說(shuō)明。一是不要在搜索頁(yè)面上放置不相關(guān)因素，最好放上最近搜索詞，常用搜索詞等，二是不要給用戶太多選擇項(xiàng)（現(xiàn)在選擇恐懼癥患者越來(lái)越多）。

關(guān)鍵詞二：清晰明確

對(duì)應(yīng)于蘋(píng)果：Clarity

蘋(píng)果的HIG中三大原則之首就是清晰，這里面有幾層含義，其中之一就是開(kāi)發(fā)者有義務(wù)通過(guò)導(dǎo)航欄設(shè)置解答用戶的三大疑問(wèn)：

當(dāng)前在哪？

可以往何處去？

去的地方能做什么？

微信也再次強(qiáng)調(diào)了導(dǎo)航設(shè)置清晰的重要性，并且直接在微信層面就把當(dāng)前在哪和如何回去的問(wèn)題解決了，開(kāi)發(fā)者只要定義好可以往何處去就OK了，至于導(dǎo)航欄，除了顏色能更改之外，開(kāi)發(fā)者沒(méi)什么可以做的了。如iOS的狀態(tài)欄提供深淺兩種樣式，小程序?qū)Ш綑谝蚕鄳?yīng)有這兩種樣式，和狀態(tài)欄融為一體。

至于選色方案，微信也給出了示例，原則就是要配色和諧，不影響文字的可讀性，這一點(diǎn)其實(shí)也是蘋(píng)果特別在意的，建議文本和背景色的對(duì)比度要在4.5:1 - 7:1之間。

此外，開(kāi)發(fā)者可以在微信導(dǎo)航頁(yè)面內(nèi)再嵌一個(gè)自有導(dǎo)航欄，但不建議這么做，如有需要盡量使用標(biāo)簽分頁(yè)（Tab），有頂部和底部?jī)煞N樣式，蘋(píng)果對(duì)Tab欄的建議是3-5個(gè)，微信建議是2-4個(gè)，放太多選項(xiàng)不僅讓頁(yè)面顯得復(fù)雜，且不易于用戶操作。

關(guān)鍵詞三：反饋及時(shí)

對(duì)應(yīng)于蘋(píng)果：Responsiveness

微信花費(fèi)了大量的篇幅強(qiáng)調(diào)加載頁(yè)面時(shí)必須要及時(shí)、有反饋，這一定是跟小程序本身的定位有關(guān)系，因此基本上能做的都幫開(kāi)發(fā)者做了，比方說(shuō)啟動(dòng)頁(yè)除了能加個(gè)自有l(wèi)ogo外，其余元素都不能改動(dòng)，很多程序內(nèi)動(dòng)畫(huà)都是微信標(biāo)準(zhǔn)定義的，這一點(diǎn)和iOS原生App的靈活性差別比較大。

然而，兩者在大的原則上卻如出一轍，要確保界面對(duì)用戶的操作做出及時(shí)的相應(yīng)，哪怕是在加載過(guò)程當(dāng)中。由于小程序要突出輕快的特點(diǎn)，微信重點(diǎn)渲染這一部分就不奇怪了，且詳細(xì)通過(guò)示例講解了不同情況下的處理建議。

關(guān)鍵詞四：便捷優(yōu)雅

對(duì)應(yīng)于蘋(píng)果：User Friendly

微信主要提到了減少輸入和避免誤操作的問(wèn)題，這和蘋(píng)果是高度一致的，不過(guò)蘋(píng)果提供了更多的控件供選擇。

在減少誤操作方面，蘋(píng)果要求所有可觸控的范圍要在44pt以上，而微信更精確，把這個(gè)換算成了物理尺寸7mm-9mm之間。

關(guān)鍵詞五：視覺(jué)規(guī)范

對(duì)應(yīng)于蘋(píng)果：Legibility

蘋(píng)果可以說(shuō)對(duì)于文本的可讀性要求極高，并于2015年推出了其自有字體SF（San Fransisco），一套專(zhuān)門(mén)對(duì)此進(jìn)行了優(yōu)化的字體，此外，還定義了一套動(dòng)態(tài)字體標(biāo)準(zhǔn)，保證任何人都可以愉悅的在iPhone和iPad上閱讀。

而微信在字體上肯定和系統(tǒng)保持一致，其它的考慮和蘋(píng)果也是大同小異。不過(guò)，為了保證文本清晰可讀，微信更進(jìn)一步，直接把各種文本的顏色也定義死了，考慮到和自身的協(xié)調(diào)性，就連鏈接字體，出錯(cuò)字體，完成字體的顏色也都定死了，沒(méi)有任何發(fā)揮空間。

最后，我也對(duì)比了一下兩者的控件，微信提供的控件非?！拔⑿拧?，連尺寸，顏色，字號(hào)等都規(guī)定好了，沒(méi)有什么可操作的空間，比方說(shuō)下圖的Button控件，開(kāi)發(fā)者就在這10幾種樣式里選擇就好了，而相比之下iOS的控件給開(kāi)發(fā)者提供了廣闊的定制空間，這也反映出兩個(gè)平臺(tái)的不同定位。

總體來(lái)說(shuō)，蘋(píng)果和微信在UI設(shè)計(jì)的理念上是相通的，就是簡(jiǎn)單、清晰和反饋及時(shí)，不過(guò)微信在具體的解釋上更加細(xì)致，力圖避免誤解。此外，蘋(píng)果三大設(shè)計(jì)原則中除了Clarity，還有Deference（遵從）和Depth（深度），后兩者是微信談的比較少的，這也是兩者定位不同所致。

相信大家在了解了以上信息之后，可以更加清楚小程序和App之間的差別，從UI層面，小程序界面統(tǒng)一，或者說(shuō)都長(zhǎng)了一副微信的樣子，而App則是千人千面，更加多姿多彩。

本文由人人都是產(chǎn)品經(jīng)理作者 @沙銘 原創(chuàng)發(fā)布雷鋒網(wǎng)。未經(jīng)許可，禁止轉(zhuǎn)載。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。