2024-6-27 資深UI設計者
規(guī)范只是幫助我們設計師去簡單高效的設計頁面,但是沒有必要去循規(guī)蹈矩。
中國有句古話:溫故而知新。在這段做原型的時間中,我翻看了很多以前的交互設計,以求有所感悟,可以做出讓自己滿意的東西。我想嘗試著將一些“舊的”交互方式添加到改版中的某些地方,因為我堅信所有的東西都是有利有弊的,被淘汰的不一定絕對是不好的。
IOS和Android兩大平臺,他們各自擁有自己的一些設計規(guī)范。所謂的設計規(guī)范,不外乎就是各個平臺對于設計風格、設計方案以及交互方式的一些約定俗成。按照這些約定,既可以保證快速的實現(xiàn)產(chǎn)品設計,又可以滿足本平臺用戶的使用習慣。
為什么需要這些規(guī)范?
我們都知道,交通規(guī)則是隨著現(xiàn)代交通發(fā)展而出現(xiàn)的一個衍生品;“紅燈停,路燈行”“走在路上靠右行”這些事情從小就被父母掛在耳邊天天念叨。特別是在自己可以獨立去上學的時候,每次出門都會有一聲“路上注意安全”在耳邊響起。這些都是再教育我們要遵守交通規(guī)則?,F(xiàn)在的都市車水馬龍,正式因為有了交通規(guī)則的存在,才讓我們的出行更加有了保障。特別是國內(nèi)的交通,如果沒有交通規(guī)則的存在,像北上廣深這些城市,極有可能從早上上班一直堵車堵到晚上下班。
交通規(guī)則本身就是一個規(guī)范,正是有了這一規(guī)范才使得一切井然有序。在交通上如此,在設計領域也是如此了。如果所有人都是按照自己的意愿去做設計而沒有一個統(tǒng)一的規(guī)范,那軟件界面和交互就是五花八門的,用戶體驗更是無從談起。
IOS和Android目前是移動端最大的兩個操作平臺,他們之間有共同的地方,也存在著一些差異,接下來我們一起看看,兩個平臺上具體的頁面布局規(guī)范是怎樣的。
IOS端的頁面布局,大牛們稱之為“經(jīng)典的延續(xù)”。
為什么這樣說呢?ios是iPhone所使用的操作平臺,iPhone的產(chǎn)品經(jīng)過了這么多年的迭代,除了屏幕大小有所改變之外,其產(chǎn)品的基本造型大致上都是很一致的。同樣在其操作平臺上也是大體相同的。在IOS的平臺規(guī)范里面,它的界面上頁眉和頁腳都做出了相應的規(guī)定。頁眉我們稱為導航欄,主要是實現(xiàn)了頁面的一些跳轉以及當前頁面的一些操作。底部的頁腳通常會設計成工具欄或者標簽欄。工具欄主要是放置一些我們對于當前頁面的傳統(tǒng)操作;標簽欄主要是實現(xiàn)幾個主要頁面或者主要任務流程之間的快速切換。
在IOS端的app大多都是按照這樣的規(guī)范去設計的,先簡單的說一下,IOS對頁眉、頁腳的規(guī)定有哪些(后續(xù)我會特地寫篇關于導航和列表交互操作的文章)。
頁眉的導航欄主要是用來實現(xiàn)不同信息層級之間的交流,有時候也會用于管理當前屏幕的內(nèi)容。例如通常我們在頂部會放置一個標題來表示當前頁面的大致內(nèi)容,左側呢,會放一個返回按鈕,右側會放置一個操作按鈕。
頁腳大多會做成兩種情況。其一是做成工具欄。工具欄是用于放置操作當前屏幕中各個對象的控件,例如網(wǎng)易郵箱底部就放置了回復、轉發(fā)等控件。其二是做成標簽欄,標簽欄是讓用戶在不同的任務界面和模式之間進行切換,例如京東app的工具欄就放置了首頁、分類以及發(fā)現(xiàn)、購物車和個人中心五個Tab,用來不同界面之間的快速切換。IOS端的布局規(guī)范大概就是以上內(nèi)容了,接下來我們看一下Android端。
Android端的頁面布局,大牛們總結為“變化與統(tǒng)一”。
為什么會有這樣的一個總結,這就必須得說一下Android操作平臺的發(fā)展歷史了。
在2010年12月份,Android第一次推出了它的2.3系統(tǒng),那時Android的整個硬件布局都是混亂的,所以平臺規(guī)范更是無從談起了。一直到了2011年2月份,Android推出了3.0系統(tǒng),這是Android第一次為平板而設計的一個Android系統(tǒng),在平板上第一次出現(xiàn)了一個虛擬按鈕。緊接著,2011年10月份發(fā)布了4.0系統(tǒng),4.0才是一個Android真正意義上可以拿的出手的操作平臺,因為4.0整合了平板和手機規(guī)范,在3.0的基礎上,4.0繼續(xù)延續(xù)了虛擬按鈕和虛擬導航的樣式。時間終于來到了2014年10月份,Android推出了叫做Meterial Design 的5.0系統(tǒng),這才是Android真正最為詳細的平臺規(guī)范。再后來從2015年9月的Android 6.0一直到2018年5月份的Android 9.0,再到如今傳說中的Android Q ,Android平臺的操作規(guī)范一直在一步步完善。
回顧一下,4.0是Android系統(tǒng)一個標志性的時刻,谷歌在Android系統(tǒng)上實現(xiàn)了平板和手機的統(tǒng)一,于是將虛擬按鈕作為Android系統(tǒng)的標配,從4.0開始沒有配備硬件按鈕設備將顯示導航欄這一虛擬的系統(tǒng)欄。與IOS頁面的主要導航放在底部的標簽欄上不同,由于它已經(jīng)在底部有一個虛擬的導航欄了,所以Android 4.0把重要的系統(tǒng)操作放在了頁眉,稱之為操作欄,也叫action bar。它主要用于實現(xiàn)app內(nèi)視圖的切換和層級間的導航。
在Android 4.0中,因為它底部有虛擬導航欄,導致它的操作欄只能放在頂部。這就促使它的頁面布局肯定與IOS是不一樣的,這里我將其總結為Android 4.0的四種頁面布局:第一種是一個大而全的頂部主操作欄,配合下拉菜單進行頁面間的切換;第二種是主操作欄加次級操作欄,將下拉菜單中的頁面平鋪到頁面中;第三種是主操作欄加底部工具欄,這樣雖然會增加誤操作的風險,但是會使頁面干凈簡潔很多;第四種則是主操作欄加次級操作欄再加底部工具欄,這是用于你的產(chǎn)品有很多的功能點。
到了Android 5.0 ,出現(xiàn)了一個曾經(jīng)紅極一時的交互設計,抽屜式導航。Android 5.0出現(xiàn)的時候,IOS 7所引領的圖標扁平化已經(jīng)盛行,扁平化就是只有X軸和Y軸,Android 5.0 為了讓頁面更加有質感,它在頁面上添加了Z軸,Z軸所帶來的的空間變化,會讓頁面更加有層次感和質感。同時,在頂部主操作欄的左邊,添加了一個抽屜按鈕,點擊后會有一個抽屜式的展開。Android 5.0的操作規(guī)范說明中,大篇幅的介紹了這種抽屜式導航,Android對此非常的推崇。到了5.0,頂部的主操作欄稱之為應用欄(APP Bar),用來顯示應用的表示、應用導航、內(nèi)容搜索以及其他操作。
發(fā)展至今,就用戶而言,已經(jīng)是很難看到IOS和Android在app的交互操作上有很大的不同了。所以在沒有嚴格規(guī)定的情況下,對于交互設計師而言,一套設計稿就可以完成工作,而一些不同的交互動作和交互流程,標注即可。
最后總結一下兩個平臺常用的操作手勢,其實在移動端的手勢操作大多數(shù)是來源于我們的生活,例如在使用讀書app的時候,它的翻頁效果就是從我們生活中翻開圖書這種手勢提取來的,好的手勢肯定是來源于生活而高于生活的。
在移動端采用手勢操作有兩個大的好處:一呢是比較直觀化,不管是那個年齡段的使用人群,都可以憑借著直接去進行操作;第二呢,則是非常的高效,手勢操作可以大大的降低用戶去頁面的一些操作成本。
在IOS和Android兩個平臺上,大部分操作手勢都是相同的,但也會有一些不同,最直接的體現(xiàn)就是“刪除”功能,IOS是向左側滑動刪除,Android是長按點擊刪除。在這種手勢操作規(guī)范的“硬核”區(qū),還是要按照其平臺規(guī)范設計。而在一些“模糊”的區(qū)域,當然是本著方便用戶操作的思想去設計。
在文章的最后,我想說規(guī)范只是幫助我們設計師去簡單高效的設計頁面,但是沒有必要去循規(guī)蹈矩。更何況移動端發(fā)展到今天,就我個人而言,僅說在APP的交互操作上,兩大平臺之間的操作區(qū)別已經(jīng)越來越不明顯了,有點求同存異的感覺。而造成這一現(xiàn)象最直觀的原因,當然是所有設計者都明白的一個道理:一切設計的目的,都是以用戶的使用場景為中心的!
藍藍設計(tweetduck.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數(shù)據(jù)可視化設計公司、用戶體驗公司、高端網(wǎng)站設計公司、銀行金融軟件UI界面設計、能源及監(jiān)控軟件UI界面設計、氣象行業(yè)UI界面設計、軌道交通界面設計、地理信息系統(tǒng)GIS UI界面設計、航天軍工軟件UI界面設計、醫(yī)療行業(yè)軟件UI界面設計、教育行業(yè)軟件UI界面設計、企業(yè)信息化UI界面設計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)