• <center id="sm46c"></center>
  • <dfn id="sm46c"></dfn>
  • <strike id="sm46c"></strike>
  • <cite id="sm46c"><source id="sm46c"></source></cite>
    • <strike id="sm46c"><source id="sm46c"></source></strike>
      <option id="sm46c"></option>
      国产精品天天看天天狠,女高中生强奷系列在线播放,久久无码免费的a毛片大全,国产日韩综合av在线,亚洲国产中文综合专区在,特殊重囗味sm在线观看无码,中文字幕一区二区三区四区在线,无码任你躁久久久久久老妇蜜桃

      微信官方發(fā)布的微信應(yīng)用號(小程序)設(shè)計規(guī)范

      2017-1-9    用心設(shè)計

      如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

       來源:UI中國

      shejiguifan-2.jpg




      微信小程序設(shè)計的基本原則是微信設(shè)計中心針對在微信類上線的小程序頁面總結(jié)的設(shè)計指南及建議。以下設(shè)計原則都是基于對用戶的尊重的基礎(chǔ)上的,旨在微信生態(tài)類建立有號、、一致的用戶體驗的同時,順應(yīng)和支持各業(yè)務(wù)需求設(shè)計,實現(xiàn)用戶與程序的共贏。

      一、有好禮貌

      為了避免用戶在微信中使用小程序服務(wù)時,注意力被周圍復(fù)雜環(huán)境干擾,小程序哎設(shè)計時應(yīng)該注意減少無關(guān)的設(shè)計元素對用戶目標干擾,禮貌地向用戶展示程序側(cè)提供的服務(wù),友好地引導(dǎo)用戶進行操作。

      1. 重點突出

      每個頁面都應(yīng)有明確的重點,以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容,在確定了重點的前提下,應(yīng)盡量避免頁面上出現(xiàn)其他干擾項影響用戶的決策和操作。
      反例示意
      此頁面的主題是查詢,卻添加了諸多與查詢不相關(guān)的業(yè)務(wù)入口,與用戶的預(yù)期不符,易造成用戶的迷失。
      微信小程序設(shè)計規(guī)范_03.jpg
      糾正示意
      去掉任何與用戶目標不相關(guān)的內(nèi)容,明確頁面主題,在技術(shù)和頁面控件允許的前提下提供有助于用戶目標的幫助內(nèi)容,比如最近搜索詞,常用搜索詞等。
      微信小程序設(shè)計規(guī)范_06.jpg
      反例示意
      操作沒有注冊,讓用戶無從選擇
      微信小程序設(shè)計規(guī)范_08.jpg
      糾正示意
      首先要避免并列過多操作讓用戶選擇,在不得不并列多個操作時,需區(qū)分操作主次,減輕用戶的選擇難度。
      微信小程序設(shè)計規(guī)范_10.jpg

      2. 流程明確

      為了讓用戶順暢地使用頁面,在用戶進行某一個操作流程時,應(yīng)避免出現(xiàn)用戶目標流程之外的內(nèi)容而打斷用戶。
      反例示意
      用戶本打算進行搜索,在進入頁面時卻被突如其來的抽獎彈窗所打斷;對于抽獎沒有興趣的用戶是非常不友好的干擾,平添一份對開發(fā)團隊的惱怒;而即使有部分用戶確實被“誘人”的抽獎活動所吸引,離開主流程去抽獎之后可能就遺忘了原本的目標,進而失去了對產(chǎn)品真正價值的利用和認識。
      微信小程序設(shè)計規(guī)范_14.jpg

      二、清晰明確

      作為一個負責任的開發(fā)者,一旦用戶進入我們的小程序頁面,就有責任和義務(wù)清晰明確告知用戶身在何處、又可以往何處去,確保用戶在頁面中游刃有余地穿梭而不迷路,這樣才能為用戶提供安全的愉悅的使用體驗。

      1. 導(dǎo)航明確,來去自如

      導(dǎo)航是確保用戶在網(wǎng)頁中瀏覽跳轉(zhuǎn)時不迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶,我在哪,我可以去哪,如何回去等問題。首先在微信系統(tǒng)內(nèi)的所有小程序的全部頁面,均會自帶微信提供的導(dǎo)航欄,統(tǒng)一統(tǒng)一解決我在哪,如何回去的問題。在微信層級導(dǎo)航保持體驗一致,有益用戶在微信內(nèi)形成較為統(tǒng)一的體驗和交互認知,無需在各小程序和微信切換中新增學(xué)習(xí)成本或使用習(xí)慣。
      微信導(dǎo)航欄
      微信導(dǎo)航欄,直接繼承于客戶端,除導(dǎo)航欄顏色之外,開發(fā)者無需亦不可以對其中的內(nèi)容進行自定義。但開發(fā)者需要規(guī)定小程序各個頁面的跳轉(zhuǎn)關(guān)系,讓導(dǎo)航系統(tǒng)能夠以合理的方式工作。
      微信導(dǎo)航欄分為導(dǎo)航區(qū)域、標題區(qū)域以及操作區(qū)域。其中導(dǎo)航區(qū)控制程序頁面進程。目前導(dǎo)航欄分深淺兩種基本配色,在iOS和Android展示有所不同,如下圖所示:
      導(dǎo)航區(qū)(iOS)
      導(dǎo)航區(qū)通常只有一個操作,即返回上一級界面。開發(fā)者可定義其內(nèi)容,不可對樣式進行修改。
      導(dǎo)航區(qū)(Android)
      通常情況下,系統(tǒng)導(dǎo)航左側(cè)唯一的操作為“離開小程序,回到微信,程序后臺運行”。
      當用戶進入小程序次級頁面后,我們建議小程序自身可以設(shè)計返回操作,同事用戶也可以通過安卓系統(tǒng)自帶的硬件返回按鈕返回上一級。
      微信小程序設(shè)計規(guī)范_44.jpg
      微信導(dǎo)航欄自定義顏色規(guī)則(iOS和Android)
      小程序?qū)Ш綑谥С只镜谋尘邦伾远x功能,選擇的顏色需要在滿足可用性前提下,和諧搭配微信提供的兩套主導(dǎo)航欄圖標。建議參考以下選色效果:
      選色方案示例:
      微信小程序設(shè)計規(guī)范_16.jpg
      頁面內(nèi)導(dǎo)航
      開發(fā)者可根據(jù)自身功能合計需要在頁面內(nèi)添加自有導(dǎo)航。并保持不同頁面間導(dǎo)航一致。但是受限于手機屏幕尺寸的限制,小程序頁面的導(dǎo)航應(yīng)盡量簡單,若僅為一般線性瀏覽的頁面建議僅使用微信導(dǎo)航欄即可。
      微信控件庫提供tab導(dǎo)航供開發(fā)者選擇。tab欄可固定在頁面頂部或者底部,便于用戶在不同的tab頁面間作切換。為確保點擊區(qū)域,tab項不得超過4項。一個頁面也不應(yīng)出現(xiàn)一組以上的tab欄。

      2. 減少等待,反饋及時

      頁面的過長時間的等待會引起用戶的不良情緒,使用微信小程序項目提供的技術(shù)已能很大程度縮短等待時間。即便如此,當不可避免的出現(xiàn)了加載和等待的時候,需要予以及時的反饋以舒緩用戶等待的不良情緒。
      啟動頁設(shè)計
      小程序啟動也是小程序在微信內(nèi)容一定程度上展現(xiàn)品牌特征的頁面之一。
      本頁面將突出展示小程序品牌特征和加載狀態(tài)。
      啟動頁除LOGO品牌展示外,頁面上的其他所有元素如加載進度指示,由微信統(tǒng)一提供且不能更改。無需開發(fā)者開發(fā)。
      微信小程序設(shè)計規(guī)范_14.jpg
      下拉標示區(qū)
      微信類所有小程序頁面,都會再下拉時出現(xiàn)微信為其統(tǒng)一設(shè)計的標示區(qū)。品牌展示區(qū)由品牌名稱和微信小程序提示組成。目的是強化品牌和用戶對小程序的產(chǎn)品感知。
      微信小程序設(shè)計規(guī)范_34.jpg
      下拉標示(iOS深淺兩色方案)
      微信提供深淺兩套配色方案,如此處標示所示,文字顏色不可自定義,開發(fā)者在自定義背景色時,應(yīng)注意保證下拉標示的辨識度。
      微信小程序設(shè)計規(guī)范_46.jpg
      下拉標示(Android深淺兩色方案)
      微信下拉提示用于給用戶明確的小程序歸屬者,防止造假與作弊。此處標示提供深淺兩套方案,文字顏色不可自定義,開發(fā)者在自定義背景色時,應(yīng)注意保證下拉標示的辨識度。
      頁面刷新交互(iOS)微信小程序設(shè)計規(guī)范_28.jpg
      開發(fā)者可自定義需要通過下拉交互完成刷新的頁面,此類交互微信將提供標準能力和樣式。在樣式上,刷新圖標與下拉標示配色已捆綁,分為深淺兩套方案,開發(fā)者在使用時,應(yīng)注意頭部文字、下拉標示與刷新圖標的和諧統(tǒng)一。但用戶在該類頁面做出下拉交互時,出現(xiàn)微信小程序頁面標準加載動畫。開發(fā)者無需自行開發(fā)樣式。
      在開發(fā)者沒有在頁面頂部設(shè)計tab的情況下,若定義該頁面可通過下拉動作刷新,則刷新后加載狀態(tài)提示語小程序品牌展示區(qū)出現(xiàn)在標題欄之下,頁面頂部。微信小程序設(shè)計規(guī)范_40.jpg
      開發(fā)者暫無法執(zhí)行定義此加載效果。
      在開發(fā)者定義了頁面頂部tab并定義該Tab下的內(nèi)容頁面可通過下拉動作刷新,則刷新后加載狀態(tài)提示語小程序品牌展示區(qū)出現(xiàn)在頂部Tab之下,且僅刷新當前頁面內(nèi)容。開發(fā)者暫無法自行定義此加載效果。
      微信小程序設(shè)計規(guī)范_30.jpg

       
      來源:微信團隊



      藍藍設(shè)計www.li-bodun.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)


      日歷

      鏈接

      個人資料

      藍藍設(shè)計的小編 http://www.li-bodun.cn

      存檔

      主站蜘蛛池模板: 亚洲中文字幕日产无码2020| 欧洲国产在线精品三区| 亚洲AV成人无码久久精品在 | 亚洲成人高清av在线| 亚洲AV成人无码久久精品在| 国外av片免费看一区二区三区| 国产在线一区二区香蕉 在线| 人妻无码av一区二区三区精品| 亚洲综合无码精品一区二区| 久久青青草原精品国产app| 亚洲综合视频一区二区三区| 国产午夜成人精品视频app| 成年人午夜免费视频| 成 年 人 黄 色 大 片大 全| 97在线免费| 成人免费看www网址入口| 阜平县| av午夜福利亚洲精品福利| 久久综合久久鬼| 在线看午夜福利片国产| 亚洲成av人片无码天堂下载| 国产成人丝袜精品视频app| 日韩无码AV一区二区| 午夜自产精品一区二区三区| 黄大仙区| 欧美成人秋霞久久aa片| 插插插精品亚洲一区| 国产天美传媒性色av高清| 人成午夜免费大片| 狠狠狠狼鲁亚洲综合网| 亚洲另类激情专区小说| 久久国语对白| 国产精品特级露脸av毛片| 在线观看成人永久免费网站 | 不卡一区二区国产精品| 久久国产综合精品swag蓝导航| 亚洲国产精品久久久久婷蜜芽| 久热综合在线亚洲精品| 出租屋勾搭老熟妇啪啪| 一本一道VS无码中文字幕| 中文字幕乱码无遮挡精品视频 |