創意·科技

5個關鍵詞看小程式和App的UI異同


ID:mobview微信總喜歡在深夜推出一個大新聞,昨晚10點,小程式開放公測的消息一齣,我公號的文章都推不出去了,一直顯示系統繁忙,那得是多大的流量啊,心裡暗想,能分我一點零頭就好了,估計是我想多了!自從...

科技 科技 科技

▲點擊上方“CocoaChina”關註即可免費學習iOS開發

a


來源:微信號沙銘世界觀

ID:mobview


微信總喜歡在深夜推出一個大新聞,昨晚10點,小程式開放公測的消息一齣,我公號的文章都推不出去了,一直顯示系統繁忙,那得是多大的流量啊,心裡暗想,能分我一點零頭就好了,估計是我想多了!


a

自從做了自媒體之後,就有了職業病,看到熱點就想追,這病得治!


雖然我研究蘋果比較多,但是大家總是把小程式和App放在一起比,因此我也花時間看了一下小程式的開髮指南,尤其是UI部分的設計和原則,今天就拿它和蘋果的HIG(Human Interface Guidelines)做個比較,其實兩者在一些大的原則處理上可以說是一致的。


關鍵詞一:友好禮貌


對應於蘋果:Less is more

a


蘋果在iOS7時做了一個非常大的界面調整,以突出內容為主,去除掉了所有會幹擾用戶的界面元素,這個風格一致延續至今(以蘋果自家的App,比如指南針,天氣為例就可以看出)。


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


關鍵詞二:清晰明確


a

對應於蘋果:Clarity


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


當前在哪?

可以往何處去?

去的地方能做什麼?

a


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


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


此外,開發者可以在微信導航頁面內再嵌一個自有導航欄,但不建議這麼做,如有需要儘量使用標簽分頁(Tab),有頂部和底部兩種樣式,蘋果對Tab欄的建議是3-5個,微信建議是2-4個,放太多選項不僅讓頁面顯得複雜,且不易於用戶操作。


a

關鍵詞三:反饋及時


對應於蘋果:Responsiveness


微信花費了大量的篇幅強調載入頁面時必須要及時、有反饋,這一定是跟小程式本身的定位有關係,因此基本上能做的都幫開發者做了,比方說啟動頁除了能加個自有logo外,其餘元素都不能改動,很多程式內動畫都是微信標准定義的,這一點和iOS原生App的靈活性差別比較大。


然而,兩者在大的原則上卻如出一轍,要確保界面對用戶的操作做出及時的相應,哪怕是在載入過程當中。由於小程式要突出輕快的特點,微信重點渲染這一部分就不奇怪了,且詳細通過示例講解了不同情況下的處理建議。

a


關鍵詞四:便捷優雅


對應於蘋果:User Friendly


微信主要提到了減少輸入和避免誤操作的問題,這和蘋果是高度一致的,不過蘋果提供了更多的控制項供選擇。


a

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


關鍵詞五:視覺規範


對應於蘋果:Legibility


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

a


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




最後,我也對比了一下兩者的控制項,微信提供的控制項非常“微信”,連尺寸,顏色,字型大小等都規定好了,沒有什麼可操作的空間,比方說下圖的Button控制項,開發者就在這10幾種樣式里選擇就好了,而相比之下iOS的控制項給開發者提供了廣闊的定製空間,這也反映出兩個平臺的不同定位。


a



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


相信大家在瞭解了以上信息之後,可以更加清楚小程式和App之間的差別,從UI層面,小程式界面統一,或者說都長了一副微信的樣子,而App則是千人千面,更加多姿多彩。


a

微信號:CocoaChinabbs


▲長按二維碼“識別”關註即可免費學習 iOS 開發

月薪十萬、出任CEO、贏娶白富美、走上人生巔峰不是夢

--------------------------------------

商務合作QQ:2408167315

投稿郵箱:[email protected]

a


评论

赞助商


s