加入收藏 | 設為首頁 | 會員中心 | 我要投稿 | RSS
围棋软件
您當前的位置:围棋软件 > 科技頻道 > 互聯網

闸北区围棋学校:2019年微信小程序設計必看的內容

時間:2019-01-06 20:21:27  來源:  作者:  
分享到:

围棋软件 www.yhfhy.icu 基于微信小程序輕快的特點,我們(微信官方)擬定了小程序界面設計指南和建議。 設計指南建立在充分尊重用戶知情權與操作權的基礎之上。旨在微信生態體系內,建立友好、高效、一致的用戶體驗,同時最大程度適應和支持不同需求,實現用戶與小程序服務方的共贏。

一、友好禮貌

為了避免用戶在微信中使用小程序服務時,注意力被周圍復雜環境干擾,小程序在設計時應該注意減少無關的設計元素對用戶目標的干擾,禮貌地向用戶展示程序提供的服務,友好地引導用戶進行操作。

重點突出

每個頁面都應有明確的重點,以便于用戶每進入一個新頁面的時候都能快速地理解頁面內容,在確定了重點的前提下,應盡量避免頁面上出現其他干擾項影響用戶的決策和操作。

反例示意

此頁面的主題是查詢,卻添加了諸多與查詢不相關的業務入口,與用戶的預期不符,易造成用戶的迷失。

?

?

糾正示意

去掉任何與用戶目標不相關的內容,明確頁面主題,在技術和頁面控件允許的前提下提供有助于用戶目標的幫助內容,比如最近搜索詞,常用搜索詞等。

?

?

反例示意

操作沒有主次,讓用戶無從選擇

?

?

糾正示意

首先要避免并列過多操作讓用戶選擇,在不得不并列多個操作時,需區分操作主次,減輕用戶的選擇難度。

?

?

流程明確

為了讓用戶順暢地使用頁面,在用戶進行某一個操作流程時,應避免出現用戶目標流程之外的內容而打斷用戶。

反例示意

用戶本打算進行搜索,在進入頁面時卻被突如其來的抽獎彈窗所打斷;對于抽獎沒有興趣的用戶是非常不友好的干擾; 而即便有部分用戶確實被“誘人”的抽獎活動所吸引,離開主流程去抽獎之后可能就遺忘了原本的目標,進而失去了對產品真正價值的利用和認識。

?

?

二、清晰明確

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

導航明確,來去自如

導航是確保用戶在網頁中瀏覽跳轉時不迷路的最關鍵因素。導航需要告訴用戶,我在哪,我可以去哪,如何回去等問題。首先在微信系統內的所有小程序的全部頁面,均會自帶微信提供的導航欄,統一解決我在哪,如何回去的問題。在微信層級導航保持體驗一致,有助于用戶在微信內形成統一的體驗和交互認知,無需在各小程序和微信切換中新增學習成本或改變使用習慣。

微信導航欄

微信導航欄,直接繼承于客戶端,除導航欄顏色之外,開發者無需亦不可以對其中的內容進行自定義。但開發者需要規定小程序各個頁面的跳轉關系,讓導航系統能夠以合理的方式工作。

微信導航欄分為導航區域、標題區域以及操作區域。其中導航區控制程序頁面進程。目前導航欄分深淺兩種基本配色,在iOS和Android展示有所不同,如下圖所示:

導航區(iOS):

導航區通常只有一個操作,即返回上一級界面??⒄嚦啥ㄒ迤淠諶?,不可對樣式進行修改

導航區(Android):

同iOS一樣,導航區也只有一個返回上一級頁面的操作,而點擊安卓手機自帶的硬件返回鍵也起到相同作用。

?

?

微信導航欄自定義顏色規則(iOS和Android)

小程序導航欄支持基本的背景顏色自定義功能,選擇的顏色需要在滿足可用性前提下,和諧搭配微信提供的兩套主導航欄圖標。建議參考以下選色效果:

選色方案示例:

?

?

頁面內導航

開發者可根據自身功能設計需要在頁面內添加自有導航。并保持不同頁面間導航一致。但是受限于手機屏幕尺寸的限制,小程序頁面的導航應盡量簡單,若僅為一般線性瀏覽的頁面建議僅使用微信導航欄即可。

微信控件庫提供標簽分頁(Tab)導航供開發者選擇。標簽分頁欄可固定在頁面頂部或者底部,便于用戶在不同的分頁間做切換。為確保點擊區域,標簽不得超過4項。一個頁面也不應出現一組以上的標簽分頁欄。

標簽分頁欄選中態默認為100%實色,未選中態帶有60%,其中選中態顏色可自定義。在自定義顏色選擇中,務必注意保持分頁欄標簽的可用性、可視性和可操作性。

?

?

?

?

減少等待,反饋及時

頁面的過長時間的等待會引起用戶的不良情緒,使用微信小程序項目提供的技術已能很大程度縮短等待時間。即便如此,當不可避免的出現了加載和等待的時候,需要予以及時的反饋以舒緩用戶等待的不良情緒。

啟動頁加載

小程序啟動頁是小程序在微信內容一定程度上展現品牌特征的頁面之一。本頁面將突出展示小程序品牌特征和加載狀態。啟動頁除品牌標志(Logo)展示外,頁面上的其他所有元素如加載進度指示,均由微信統一提供且不能更改,無需開發者開發。

?

?

頁面下拉刷新加載

微信小程序內,微信提供標準的頁面下拉刷新加載能力和樣式。 開發者可自定義需要通過下拉交互完成刷新的頁面,此類交互微信將提供標準能力和樣式。在樣式上,刷新圖標與下拉標示配色已捆綁,分為深淺兩套方案,開發者在使用時,應注意頭部文字、下拉標識與刷新圖標的和諧統一。當用戶在該類頁面做出下拉交互時,出現微信小程序頁面標準加載動畫??⒄呶扌枳孕鋅⒀?

?

?

帶有標簽分頁(Tab)頁面的下拉刷新加載

若頁面帶有標簽分頁(Tab),開發者可將刷新動作位置定義到標簽欄之下,且僅刷新當前頁面內容,開發者暫無法自行定義此加載效果。

?

?

深淺兩套下拉樣式

微信下拉提示用于給用戶明確的小程序歸屬者,防止造假與作弊。此處標示提供深淺兩套方案,文字顏色不可自定義,開發者在自定義背景色時,應注意保證下拉標示的辨識度。iOS和Android配色方案相同如下展示。

?

?

微信下拉標示錯誤使用案例

請避免以下錯誤使用情況,確保信息的可見性和頁面的可用性。

?

?

?

?

頁面內加載反饋

開發者可在小程序里自定義頁面內容的加載樣式。建議不管是使用在局部還是全體,自定義加載樣式都應該盡可能簡潔,并使用簡單動畫告知用戶加載過程。 開發者也可以使用微信提供的,統一的頁面加載樣式,如圖中例所示。

?

?

模態加載

模態的加載樣式將覆蓋整個頁面的,由于無法明確告知具體加載的位置或內容將可能引起用戶的焦慮感,因此應謹慎使用。除了在某些全局性操作下不要使用模態的菊花。

?

文章轉載于:網云星 //www.wangyunxing.com/

熱詞
免責聲明:本文僅代表作者個人觀點,與呂梁信息網無關。其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,并請自行核實相關內容。
來頂一下
围棋软件
围棋软件
    
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
推薦資訊
看完這群孩子,我想去練武術了!——斌心學校第二屆武風大會之武術操比賽
看完這群孩子,我想去練
“一帶一路”全球行|開放的大門,不一般!
“一帶一路”全球行|開
除了共同勘探南海,中菲合作領域還延伸到了這里
除了共同勘探南海,中菲
李誕與女友黑尾醬曬情侶寫真 相視燦笑甜蜜搞怪
李誕與女友黑尾醬曬情
欄目更新
欄目熱門
   
广西快三计划软件手机 黑马计划软件官网 彩票稳赚团队 福彩3d计划必中软件 永利网上投注站可靠吗 赛车飞艇计划 麻将28杠比大小规则 电子游戏注册大全 现金龙虎平台 重庆欢乐生肖全天计划 时时彩后三乘以0.618 快乐时时和澳洲一样的吗 黑龙江时时历史开奖号码 全天pk10精准计划群 彩票跟计划亏了 快三稳赚不赔的方法