狠色狠色狠狠色综合久久,国产第一页浮力影院入口,刺激性视频黄页,日本强伦片中文字幕免费看 黄色综合,91.cn国产大片,亚洲日韩视频在线观看

設(shè)計丨回顧IOS與Android的交互設(shè)計規(guī)范及發(fā)展歷程

2024-6-27    資深UI設(shè)計者

規(guī)范只是幫助我們設(shè)計師去簡單高效的設(shè)計頁面,但是沒有必要去循規(guī)蹈矩。

 

中國有句古話:溫故而知新。在這段做原型的時間中,我翻看了很多以前的交互設(shè)計,以求有所感悟,可以做出讓自己滿意的東西。我想嘗試著將一些“舊的”交互方式添加到改版中的某些地方,因為我堅信所有的東西都是有利有弊的,被淘汰的不一定絕對是不好的。

 

IOS和Android兩大平臺,他們各自擁有自己的一些設(shè)計規(guī)范。所謂的設(shè)計規(guī)范,不外乎就是各個平臺對于設(shè)計風(fēng)格、設(shè)計方案以及交互方式的一些約定俗成。按照這些約定,既可以保證快速的實現(xiàn)產(chǎn)品設(shè)計,又可以滿足本平臺用戶的使用習(xí)慣。

 

 

為什么需要這些規(guī)范?

 

我們都知道,交通規(guī)則是隨著現(xiàn)代交通發(fā)展而出現(xiàn)的一個衍生品;“紅燈停,路燈行”“走在路上靠右行”這些事情從小就被父母掛在耳邊天天念叨。特別是在自己可以獨(dú)立去上學(xué)的時候,每次出門都會有一聲“路上注意安全”在耳邊響起。這些都是再教育我們要遵守交通規(guī)則?,F(xiàn)在的都市車水馬龍,正式因為有了交通規(guī)則的存在,才讓我們的出行更加有了保障。特別是國內(nèi)的交通,如果沒有交通規(guī)則的存在,像北上廣深這些城市,極有可能從早上上班一直堵車堵到晚上下班。

 

交通規(guī)則本身就是一個規(guī)范,正是有了這一規(guī)范才使得一切井然有序。在交通上如此,在設(shè)計領(lǐng)域也是如此了。如果所有人都是按照自己的意愿去做設(shè)計而沒有一個統(tǒng)一的規(guī)范,那軟件界面和交互就是五花八門的,用戶體驗更是無從談起。

 

IOS和Android目前是移動端最大的兩個操作平臺,他們之間有共同的地方,也存在著一些差異,接下來我們一起看看,兩個平臺上具體的頁面布局規(guī)范是怎樣的。

 

 

IOS端的頁面布局,大牛們稱之為“經(jīng)典的延續(xù)”。

 

為什么這樣說呢?ios是iPhone所使用的操作平臺,iPhone的產(chǎn)品經(jīng)過了這么多年的迭代,除了屏幕大小有所改變之外,其產(chǎn)品的基本造型大致上都是很一致的。同樣在其操作平臺上也是大體相同的。在IOS的平臺規(guī)范里面,它的界面上頁眉和頁腳都做出了相應(yīng)的規(guī)定。頁眉我們稱為導(dǎo)航欄,主要是實現(xiàn)了頁面的一些跳轉(zhuǎn)以及當(dāng)前頁面的一些操作。底部的頁腳通常會設(shè)計成工具欄或者標(biāo)簽欄。工具欄主要是放置一些我們對于當(dāng)前頁面的傳統(tǒng)操作;標(biāo)簽欄主要是實現(xiàn)幾個主要頁面或者主要任務(wù)流程之間的快速切換。

 

 

在IOS端的app大多都是按照這樣的規(guī)范去設(shè)計的,先簡單的說一下,IOS對頁眉、頁腳的規(guī)定有哪些(后續(xù)我會特地寫篇關(guān)于導(dǎo)航和列表交互操作的文章)。

 

頁眉的導(dǎo)航欄主要是用來實現(xiàn)不同信息層級之間的交流,有時候也會用于管理當(dāng)前屏幕的內(nèi)容。例如通常我們在頂部會放置一個標(biāo)題來表示當(dāng)前頁面的大致內(nèi)容,左側(cè)呢,會放一個返回按鈕,右側(cè)會放置一個操作按鈕。

 

頁腳大多會做成兩種情況。其一是做成工具欄。工具欄是用于放置操作當(dāng)前屏幕中各個對象的控件,例如網(wǎng)易郵箱底部就放置了回復(fù)、轉(zhuǎn)發(fā)等控件。其二是做成標(biāo)簽欄,標(biāo)簽欄是讓用戶在不同的任務(wù)界面和模式之間進(jìn)行切換,例如京東app的工具欄就放置了首頁、分類以及發(fā)現(xiàn)、購物車和個人中心五個Tab,用來不同界面之間的快速切換。IOS端的布局規(guī)范大概就是以上內(nèi)容了,接下來我們看一下Android端。

 

 

 

Android端的頁面布局,大牛們總結(jié)為“變化與統(tǒng)一”。

 

為什么會有這樣的一個總結(jié),這就必須得說一下Android操作平臺的發(fā)展歷史了。

 

在2010年12月份,Android第一次推出了它的2.3系統(tǒng),那時Android的整個硬件布局都是混亂的,所以平臺規(guī)范更是無從談起了。一直到了2011年2月份,Android推出了3.0系統(tǒng),這是Android第一次為平板而設(shè)計的一個Android系統(tǒng),在平板上第一次出現(xiàn)了一個虛擬按鈕。緊接著,2011年10月份發(fā)布了4.0系統(tǒng),4.0才是一個Android真正意義上可以拿的出手的操作平臺,因為4.0整合了平板和手機(jī)規(guī)范,在3.0的基礎(chǔ)上,4.0繼續(xù)延續(xù)了虛擬按鈕和虛擬導(dǎo)航的樣式。時間終于來到了2014年10月份,Android推出了叫做Meterial Design 的5.0系統(tǒng),這才是Android真正最為詳細(xì)的平臺規(guī)范。再后來從2015年9月的Android 6.0一直到2018年5月份的Android 9.0,再到如今傳說中的Android Q ,Android平臺的操作規(guī)范一直在一步步完善。

 

 

回顧一下,4.0是Android系統(tǒng)一個標(biāo)志性的時刻,谷歌在Android系統(tǒng)上實現(xiàn)了平板和手機(jī)的統(tǒng)一,于是將虛擬按鈕作為Android系統(tǒng)的標(biāo)配,從4.0開始沒有配備硬件按鈕設(shè)備將顯示導(dǎo)航欄這一虛擬的系統(tǒng)欄。與IOS頁面的主要導(dǎo)航放在底部的標(biāo)簽欄上不同,由于它已經(jīng)在底部有一個虛擬的導(dǎo)航欄了,所以Android 4.0把重要的系統(tǒng)操作放在了頁眉,稱之為操作欄,也叫action bar。它主要用于實現(xiàn)app內(nèi)視圖的切換和層級間的導(dǎo)航。

 

 

在Android 4.0中,因為它底部有虛擬導(dǎo)航欄,導(dǎo)致它的操作欄只能放在頂部。這就促使它的頁面布局肯定與IOS是不一樣的,這里我將其總結(jié)為Android 4.0的四種頁面布局:第一種是一個大而全的頂部主操作欄,配合下拉菜單進(jìn)行頁面間的切換;第二種是主操作欄加次級操作欄,將下拉菜單中的頁面平鋪到頁面中;第三種是主操作欄加底部工具欄,這樣雖然會增加誤操作的風(fēng)險,但是會使頁面干凈簡潔很多;第四種則是主操作欄加次級操作欄再加底部工具欄,這是用于你的產(chǎn)品有很多的功能點(diǎn)。

 

 

 到了Android 5.0 ,出現(xiàn)了一個曾經(jīng)紅極一時的交互設(shè)計,抽屜式導(dǎo)航。Android 5.0出現(xiàn)的時候,IOS 7所引領(lǐng)的圖標(biāo)扁平化已經(jīng)盛行,扁平化就是只有X軸和Y軸,Android 5.0 為了讓頁面更加有質(zhì)感,它在頁面上添加了Z軸,Z軸所帶來的的空間變化,會讓頁面更加有層次感和質(zhì)感。同時,在頂部主操作欄的左邊,添加了一個抽屜按鈕,點(diǎn)擊后會有一個抽屜式的展開。Android 5.0的操作規(guī)范說明中,大篇幅的介紹了這種抽屜式導(dǎo)航,Android對此非常的推崇。到了5.0,頂部的主操作欄稱之為應(yīng)用欄(APP Bar),用來顯示應(yīng)用的表示、應(yīng)用導(dǎo)航、內(nèi)容搜索以及其他操作。

 

 

發(fā)展至今,就用戶而言,已經(jīng)是很難看到IOS和Android在app的交互操作上有很大的不同了。所以在沒有嚴(yán)格規(guī)定的情況下,對于交互設(shè)計師而言,一套設(shè)計稿就可以完成工作,而一些不同的交互動作和交互流程,標(biāo)注即可。

 

 

 

最后總結(jié)一下兩個平臺常用的操作手勢,其實在移動端的手勢操作大多數(shù)是來源于我們的生活,例如在使用讀書app的時候,它的翻頁效果就是從我們生活中翻開圖書這種手勢提取來的,好的手勢肯定是來源于生活而高于生活的。

 

在移動端采用手勢操作有兩個大的好處:一呢是比較直觀化,不管是那個年齡段的使用人群,都可以憑借著直接去進(jìn)行操作;第二呢,則是非常的高效,手勢操作可以大大的降低用戶去頁面的一些操作成本。

 

在IOS和Android兩個平臺上,大部分操作手勢都是相同的,但也會有一些不同,最直接的體現(xiàn)就是“刪除”功能,IOS是向左側(cè)滑動刪除,Android是長按點(diǎn)擊刪除。在這種手勢操作規(guī)范的“硬核”區(qū),還是要按照其平臺規(guī)范設(shè)計。而在一些“模糊”的區(qū)域,當(dāng)然是本著方便用戶操作的思想去設(shè)計。

 

 

在文章的最后,我想說規(guī)范只是幫助我們設(shè)計師去簡單高效的設(shè)計頁面,但是沒有必要去循規(guī)蹈矩。更何況移動端發(fā)展到今天,就我個人而言,僅說在APP的交互操作上,兩大平臺之間的操作區(qū)別已經(jīng)越來越不明顯了,有點(diǎn)求同存異的感覺。而造成這一現(xiàn)象最直觀的原因,當(dāng)然是所有設(shè)計者都明白的一個道理:一切設(shè)計的目的,都是以用戶的使用場景為中心的!

作者:丨叁月丨
鏈接:https://www.zcool.com.cn/article/ZMTAyMTMyMA==.html
來源:站酷

藍(lán)藍(lán)設(shè)計(www.jghy.net )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。

WechatIMG27.jpg

關(guān)鍵詞:UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司高端網(wǎng)站設(shè)計公司、銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

日歷

鏈接

個人資料

存檔