<button id="awefu"><object id="awefu"><input id="awefu"></input></object></button>

  1. <tbody id="awefu"><noscript id="awefu"></noscript></tbody>
  2. <dd id="awefu"></dd>
    <progress id="awefu"></progress>

    <tbody id="awefu"><noscript id="awefu"></noscript></tbody>

    昆明UI培訓
    達內昆明五一路

    188-5191-7064

    微信小程序和App的UI設計異同

    • 時間:2016-11-04 17:26
    • 發布:昆明UI培訓
    • 來源:人人都是產品經理

    昨晚10點,微信小程序開放公測。達內昆明UI培訓看了一下小程序的開發指南,尤其是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的靈活性差別比較大。

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

    關鍵詞四:便捷優雅

    對應于蘋果:User Friendly

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

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

    關鍵詞五:視覺規范

    對應于蘋果:Legibility

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

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

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

    上一篇:如何做出有創意的海報/Banner?
    下一篇:做好這幾個交互細節,提升用戶體驗

    馬上預約三天免費體驗課

    姓名:

    電話:

    UI設計師:用戶思維,就是上帝思維

    UI設計師應該這樣輸出產品原型

    由標簽導航引發的問題:標簽導航的格局

    達內昆明UI培訓談談團隊文化建設

    • 掃碼領取資料

      回復關鍵字:視頻資料

      免費領取 達內課程視頻學習資料

    • 視頻學習QQ群

      添加QQ群:1143617948

      免費領取達內課程視頻學習資料

    Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

    選擇城市和中心
    江西省

    貴州省

    廣西省

    海南省

    2018最新天堂福视频 2019亚洲福利合集 老司机带带我精品视频 百度 好搜 搜狗
    <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>