日本96视频国产_久久久久久无码中文_国产999免费在线视频_日本大胆欧美中文字幕

您的位置:首頁(yè)>>分享>>小程序開發(fā)
常熟app開發(fā):從關(guān)鍵詞看小程序和App的UI異同

時(shí)間:2017-05-24 00:41:23作者:常熟做網(wǎng)站制作

        近期大家總是把小程序(procedure)和App放在一起比較,因此我也花時(shí)間看了一下小程序(procedure)的開發(fā)指南,尤其是UI部分的設(shè)計(jì)和原則,今天就拿它和蘋果的HIG(Human Interface Guidelines)做個(gè)比較,其實(shí)兩者在一些大的原則處理上可以說是一致的。



        1、關(guān)鍵(解釋:比喻事物的重要組成部分)詞一:友好禮貌

        對(duì)應(yīng)于蘋果:Less is more

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

        微信在指南一開始也強(qiáng)調(diào)了這個(gè)原則,并用兩個(gè)正反示例加以說明。一是不要在搜索頁(yè)面上放置不相關(guān)因素(factor),最好放上最近搜索詞,常用搜索詞等,二是不要給用戶太多選擇項(xiàng)。



        2、關(guān)鍵(解釋:比喻事物的重要組成部分)詞二:清晰明確

        對(duì)應(yīng)于蘋果:Clarity

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

       · 當(dāng)前在哪?

       · 可以往何處去?

       · 去的地方能做什么?

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

        選色方案,微信也給出了示例,原則就是要配色和諧,不影響文字的可讀性,這一點(diǎn)其實(shí)也是蘋果特別在意的,建議文本和背景色的對(duì)比度要在4.
  5:1 –
  7:1之間。此外,開發(fā)者可以在微信網(wǎng)址導(dǎo)航頁(yè)面內(nèi)再嵌一個(gè)自有網(wǎng)址導(dǎo)航欄,但不建議這么做,如有需要盡量使用標(biāo)簽分頁(yè)(Tab),有頂部和底部?jī)煞N樣式,蘋果對(duì)Tab欄的建議是3-5個(gè),微信建議是2-4個(gè),放太多選項(xiàng)不僅讓頁(yè)面顯得復(fù)雜,且不易于用戶操作。


        3、關(guān)鍵(解釋:比喻事物的重要組成部分)詞三:反饋(feedback)及時(shí)

        對(duì)應(yīng)于蘋果:Responsiveness

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

        然而,兩者在大的原則上卻如出一轍,要確保界面對(duì)用戶的操作做出及時(shí)的相應(yīng),哪怕是在加載過程當(dāng)中。常熟app開發(fā)公司是一家專注于手機(jī)APP開發(fā)、微信公眾平臺(tái)、商城網(wǎng)站開發(fā)等綜合型互聯(lián)網(wǎng)企業(yè)。由于小程序(procedure)要突出輕快的特點(diǎn),微信重點(diǎn)渲染這一部分就不奇怪了,且詳細(xì)通過示例講解了不同情況下的處理建議。



        4、關(guān)鍵(解釋:比喻事物的重要組成部分)詞四:便捷優(yōu)雅

        對(duì)應(yīng)于蘋果:User Friendly

        微信主要提到了減少輸入和避免誤操作的問題,這和蘋果是高度一致的,不過蘋果提供了更多的控件(對(duì)數(shù)據(jù)和方法的封裝)供選擇。在減少誤操作方面,蘋果要求所有可觸控的范圍要在44pt以上,而微信更精確,把這個(gè)換算成了物理尺寸7mm-9mm之間。



        5、關(guān)鍵(解釋:比喻事物的重要組成部分)詞五:視覺標(biāo)準(zhǔn)

        對(duì)應(yīng)于蘋果:Legibility

        蘋果可以說對(duì)于文本的可讀性要求極高,并于2015年推出了其自有字體SF(San Fransisco),一套專門對(duì)此進(jìn)行了優(yōu)化的字體,此外,還定義了一套動(dòng)態(tài)字體標(biāo)準(zhǔn),保證任何人都可以愉悅的在iPhone和iPad上閱讀。常熟微信開發(fā)模式所實(shí)現(xiàn)的功能,主要是在和微信號(hào)對(duì)話的時(shí)候用到。

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



        最后,我也對(duì)比了一下兩者的控件(對(duì)數(shù)據(jù)和方法的封裝),微信提供的控件(對(duì)數(shù)據(jù)和方法的封裝)非常“微信”,連尺寸,顏色,字號(hào)等都規(guī)定好了,沒有什么可操作的空間,比方說下圖的Button控件,開發(fā)者就在這10幾種樣式里選擇就好了,而相比之下iOS的控件給開發(fā)者提供了廣闊的定制空間,這也反映出兩個(gè)平臺(tái)的不同定位。





        總體來說,蘋果和微信在UI設(shè)計(jì)的理念上是相通的,就是簡(jiǎn)單、清晰和反饋(feedback)及時(shí),不過微信在具體的解釋上更加精細(xì),力圖避免誤解。常熟app開發(fā)是指專注于手機(jī)應(yīng)用軟件開發(fā)與服務(wù)。 此外,蘋果三大設(shè)計(jì)原則中除了Clarity,還有Deference(遵從)和Depth(深度),后兩者是微信談的比較少的,這也是兩者定位不同所致。

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

back

常熟市虞山鎮(zhèn)莫干路2號(hào)

? Copyright 2022 baichuangweb.com

版權(quán)所有 蘇ICP備16050462號(hào)-1 常熟做網(wǎng)站蘇公網(wǎng)安備 32058102001233號(hào)

友情鏈接:

本站關(guān)鍵詞:常熟網(wǎng)站制作 常熟做網(wǎng)站 常熟網(wǎng)絡(luò)公司

過往皆為序章 未來一切可期

掃一掃,加我微信