iOS設計里念(人機界面準則)

從iOS6到iOS7:扁平化是界面設計的必然趨勢

在過去幾年里,軟件和APP的界面設計風格發(fā)生了迅速變化,由3D、擬物發(fā)展到扁平、簡約。我認為,產(chǎn)品界面從擬物化到扁平化的過渡,是設計發(fā)展過程中一個必然的趨勢。

大家是否想過,為什么會出現(xiàn)擬物化設計?

在軟件設計之初,大眾用戶對軟件是毫無概念的。軟件是干什么的?每一個按鈕有什么作用?用戶會產(chǎn)生種種疑問。設計師們?yōu)榱私鉀Q這個問題,才將軟件界面設計成擬物的形式,讓用戶能夠?qū)浖兄庇^、準確的理解。比如,iOS6中各種精美的擬物圖標,采用擬物化的設計去對界面進行隱喻。


但是,擬物化設計為什么過時了?

1. 信息過載

隨著互聯(lián)網(wǎng)不斷發(fā)展,我們每天接受的信息量越來越大,并且,大部分內(nèi)容消費已轉(zhuǎn)移到小屏幕設備,于是更是加劇了超負荷現(xiàn)象。要在移動設備有限的屏幕空間中,展示對用戶最重要的信息,砍掉用戶界面擬物化的陰影、紋理等復雜的元素才是設計的王道。如果要沿用隱喻的設計,過于寫實的話,產(chǎn)品和內(nèi)容本身的辨識度還有使用效率就會降低。

2. 用戶對軟件的學習成本降低

隨著數(shù)字化的不斷發(fā)展和成熟,人們對軟件的使用可謂是越來越熟練,設計師們也不必再采用擬物化的方法去讓用戶建立對軟件的認識。比如電子郵箱,經(jīng)過十幾年的發(fā)展,用戶已經(jīng)對郵箱的界面有非常清晰準確的認識,根本不需要去用擬物化的設計去讓用戶理解產(chǎn)品。

因此,我認為,iOS7的扁平化設計,是人機界面設計的一個必然的趨勢。


Jony Ive:真正的簡單是在復雜中建立秩序。

IOS7是秉承著簡約、清晰、高效的主旨去進行設計的。它所采用的扁平化設計并不只是圖標和設計風格的扁平,化繁為簡的過程中,其實有很多思考。今天主要由IOS7人機界面準則,思考IOS7背后的設計理念。


在《iOS7人機界面準則》中,Jony把iOS7的設計理念歸納為三點:依從內(nèi)容、清晰呈現(xiàn)、縱深表達。我在學習了《iOS人機界面準則》之后,想把其背后的設計理念重新歸納整理,抽象成兩點:

1. 內(nèi)容優(yōu)先? ? ? ? 2.高效操作。



無論界面設計如何變化,內(nèi)容始終是界面中要表達的核心。


iOS7強調(diào)讓內(nèi)容延伸至整個屏幕。

1. 頂部狀態(tài)欄的改變。

將頂部的狀態(tài)欄融入內(nèi)容,不再用線條分割開,使用戶在視覺上感覺內(nèi)容空間變大。

2. 在必要時隱藏UI元素。為了使屏幕主體內(nèi)容更加突出,更多地呈現(xiàn)給用戶,必要時會隱藏UI元素。iOS7在很多原生應用中都是用了自動隱藏上下狀態(tài)欄和導航欄的設計,Safari中,在用戶進行上滑操作瀏覽內(nèi)容時,系統(tǒng)會自動隱藏導航欄和網(wǎng)址輸入框,增大用戶的可視區(qū)域。地圖應用中甚至連最頂端的狀態(tài)欄也一并隱藏了。


iOS7強調(diào)弱化控件效果

1. 去除系統(tǒng)空間的紋理與質(zhì)感,簡化操作元素。新的設計去除了iOS6系統(tǒng)控件的紋理和質(zhì)感表現(xiàn),不再使用擬物化方法來表達。比如系統(tǒng)按鈕控件,不再使用擬物化的按鈕邊框及高光、陰影,取而代之的是簡化的圖標元素和操作內(nèi)容。

2. 使用統(tǒng)一用色來表達可操作元素。iOS6的按鈕被指示箭頭和文字所取代,而為了表達元素的可操作性。iOS7定義了關(guān)鍵色這一概念。在同一個app中,使用統(tǒng)一用色來表達可操作元素。在備忘錄中,使用的是黃色;而在系統(tǒng)設置中,則統(tǒng)一使用了藍色作為關(guān)鍵色。

從備忘錄和日歷這兩個應用中可以很明顯地看到這種整體視覺效果的變化。iOS7的日歷,內(nèi)容更加突出,操作元素被弱化;而iOS6的日歷,各種控件的效果,看了就會讓人很想去點擊。


iOS7大量使用了留白。


iOS7大量使用了留白。

在設計中運用留白可以使得要表現(xiàn)的主體內(nèi)容和功能更加突出。在iOS7人機交互指南中說:空白可以向用戶傳遞寧靜和安寧的感覺,讓app顯得更專注,更有效率。

iOS7的日歷是一個留白運用的經(jīng)典例子,空白空間的使用使得iOS7的日歷內(nèi)容更加突出,并不在有iOS6日歷的擁擠和緊迫感。


iOS7大量使用了半透明的元素

半透明效果能夠幫助用戶盡可能多的了解到被遮擋的內(nèi)容。

像控制中心和通知中心,這種兩種全局都可以進行的操作,是采用半透明的遮罩覆蓋在當前頁面之上,1. 可以讓用戶明白控制中心和后面界面的層級關(guān)系。2. 不管用戶當前在什么位置,使可以清楚的讓在用戶拉出控制中心后還能看到自己的位置。



我們總結(jié)一下,在內(nèi)容優(yōu)先中,iOS7背后蘊含的設計理念。剛才我們主要看了iOS7系統(tǒng)的原生應用是如何體驗這些設計理念的,接下來,我們再來看看,優(yōu)秀的第三方應用,又是如何舉一反三,把這些設計理念運用到極致的。


實例1:最美應用

最美應用非常巧妙地充分利用了屏幕空間。在應用詳情的頁面,收藏、分享的按鈕隨著頁面上滑到頂部時,固定在頂部。一方面使得用戶可以專注于內(nèi)容的閱讀,一方面使得用戶在閱讀的同時可以隨時進行收藏、分享的操作。所以是通過充分利用屏幕空間去展示內(nèi)容。


實例2:手機淘寶

充分利用屏幕空間。

在搜索頁面,進行上滑操作會將上部的搜索框和排序按鈕隱藏,使用戶有更大的屏幕空間去瀏覽內(nèi)容。當用戶下滑時,搜索框和排序按鈕再次被拉出。

這種做法在現(xiàn)在的應用中是一種很通用的做法,常見于瀏覽器、購物類、資訊類等以瀏覽內(nèi)容為核心的應用。這種設計也很適合在青檸客戶端,在首頁、附近瀏覽內(nèi)容的時候可以折疊標題欄,使用戶有更大的屏幕空間去瀏覽內(nèi)容。


實例3:搜狗搜索


實例3:搜狗搜索

前不久搜狗剛推出的客戶端,可以搜索微信的內(nèi)容。其設計非常符合iOS7的設計理念中充分利用屏幕空間的設計原則。當在首頁上滑時,搜索框會和LOGO 回自動固定在頂部。

使用半透明效果,讓用戶看到更多內(nèi)容。當用戶在搜索框進行輸入的時候,搜索框的下拉菜單使用了半透明效果,這樣不管用戶在哪個頁面進行搜索都不會迷失位置。


實例4:郵箱大師

弱化了控件的效果,突出主要內(nèi)容。使用統(tǒng)一的藍色來表示可操作元素。但使用藍色是否合適其實值得商榷。因為:1. iOS的原生郵件應用使用藍色 2. 郵箱大師的logo為紅色,可能會給用戶造成疑惑。


進入設計理念的第二部分:高效操作。

在使用iOS7系統(tǒng)的時候,你會發(fā)現(xiàn),操作更加方便了,任務進行的更順暢了。那么,接下來,我們就來詳細說說,iOS7是如何使用戶操作更加高效的。


iOS7中減少了常用操作的路徑。

控制中心:上滑即可調(diào)出常用的快捷操作。在手機處于任何狀態(tài)下都可以隨時調(diào)出控制中心,包括在鎖屏界面的狀態(tài)下。快捷操作中分為四個區(qū)域,快捷設置,屏幕亮度調(diào)節(jié),還可以對正在播放的音樂進行操作,常用App。

通知中心:下滑調(diào)出所有與訊息相關(guān)的內(nèi)容。與控制中心相同,在鎖屏狀態(tài)也能調(diào)出通知中心。除了App推送的消息之外,還可以查看股票、天氣、日歷、待辦事項。

多任務管理:雙擊home鍵進行任務的切換和刪除。如何高效的進行多任務管理將在下面細講。



我們對比一下iOS6和iOS7中,打開WiFi的操作流程,可以非常明顯的看到,iOS7中的常用操作的路徑變得非常的簡化。



雙擊Home鍵:進行高效的多任務切換

多任務切換顯示進程中的應用的當前狀態(tài)和圖標。讓用戶可以更直觀地看到應用當前所在的狀態(tài),方便切換。

2個你也許未曾發(fā)現(xiàn)的高效小細節(jié):

1. 在打開多任務切換時,會自動定位到你最有可能切換到的應用。什么意思呢?比如,我當前打開的應用是QQ空間,雙擊home鍵,顯示在屏幕中間的應用是我上一個打開的應用人人。這樣的策略使得每次打開多任務切換時,在中間顯示的總是我最有可能切換到的應用。

2. 在小屏幕盡可能多的展示進程中的APP。什么意思呢?在多任務切換中,同一個界面最多只能顯示三個應用程序的預覽圖,當用戶打開了多個應用的時候,尋找App并不高效。蘋果的處理辦法是,顯示三個預覽圖,但底部的小圖標會顯示5個。也就是說,在預覽圖還沒有出現(xiàn)的時候,先顯示出圖標,告訴用戶下一個你將看到的App是什么。這樣的策略保證了多任務切換的高效。


iOS7的信息架構(gòu):深度層級,高效切換:

例如照片應用,iOS7改變了以前的信息架構(gòu),將照片劃分為年度、精選、時刻、具體的照片詳情四個層級。相比iOS6的所有相機膠卷都在一起查看來說,“找照片”這個操作變得更加高效。


例如日歷應用。同樣的深度層級結(jié)構(gòu)也運用到了日歷中,iOS6中的年月日切換都在一個頁面中進行,操作較為復雜。而iOS7 把層級重新劃分成為年、月、日三個層級。在新層級中進行切換日期的操作會更加直觀與高效。并且,在視圖中始終使用紅點標注出當前位置,用戶一眼就能看到當天的日期并執(zhí)行其他日歷任務。這也是高效的體現(xiàn)。


iOS7大量運用了手勢操作

iOS 7 中手勢的概念已深深植入每一個角落,也是為未來大屏幕的單手操做的一個準備。

手勢的優(yōu)點:減少界面元素,使用戶更多地關(guān)注于產(chǎn)品內(nèi)容本身。簡化操作流程,更高效。

手勢的缺點:操作不可見,學習成本高



全局,下拉可以拉出Spotlight搜索。

系統(tǒng)原生App,在二級頁面可以通過左滑返回上一個頁面。

天氣,在具體的天氣頁面pinch,可以查看所有已添加的城市的天氣概況


Safari,切換標簽時上下滑動可以翻滾。向左滑動可以刪除。為什么是左滑刪除?1,刪除按鈕在左上角 2. 點擊刪除按鈕后卡片會向左滑動,隱喻地告訴用戶左滑刪除的功能。

信息:向左滑動可以查看信息發(fā)送時間。

相機:左右滑動可以切換拍照模式

總結(jié)一下手勢設計的空間隱喻。



我們總結(jié)一下,在高效操作中,iOS7背后蘊含的設計理念。剛才我們主要看了iOS7系統(tǒng)的原生應用是如何體驗這些設計理念的,接下來,我們再來看看,優(yōu)秀的第三方應用,又是如何舉一反三,把這些設計理念運用到極致的。


Clear是一款待辦事項和提醒應用。它的全局都沒有任何的按鈕控件,所有的操作通過手勢進行。

通過顏色來表示優(yōu)先級的高低。下拉會創(chuàng)建一個item,向右滑會將條目標為已完成,pinch操作會回到上一級頁面。所有的手勢操作,都對應著合理的引導。很符合現(xiàn)實中的隱喻,很易學,用戶會直覺會去探索和執(zhí)行的操作。


clear的信息架構(gòu)。clear總共有三個層級。Clear大概分三個層級,Menu——>Lists——>Items,這三個層級分別是三個獨立界面,利用手勢進行切換。向下滑動,回到上一層級,利用手勢向上滑動,回到上一層級。


Clear的導航很特殊:沒有標簽頁,沒有選項卡,沒有按鈕,完全依賴手勢操作。Menu為最上面的層級,在Menu中可以完成對聲音、主題等選項的設置。List是中間的層級。對于不同類型的待辦事項,可以通過創(chuàng)建不同的List來實現(xiàn)分類。比如電影類的待辦事項、工作待辦事項等。Item是最底部的層級,在不同的List中可以添加不同的item。


這么多操作都可以通過五個手勢就可以完成。

手勢設計,本就具有隱蔽性高、需要學習、需要記憶、預防誤操作等等問題,盡管Clear努力將所有的手勢與用戶的直覺和無意識動作結(jié)合起來,某些手勢仍然具有一些問題,比如——輕微下拉和猛力下拉,拉動的距離不可見,比較容易誤操作,經(jīng)常想回到上一級的時候會執(zhí)行了新建操作。


今天凌晨一點是蘋果的發(fā)布會,iOS8也即將提供更新。那么,設計適應iOS8的應用又要注意哪些問題呢?今天就從iOS8的新功能出發(fā),看看iOS8有哪些重大的改進。


iOS8在沿用iOS7設計風格的基礎(chǔ)上,做了更多功能的優(yōu)化,可以把iOS8稱作iOS7的加強版。

在這里,我把iOS8的新功能歸納為兩類,一是更為高效的人機交互方式。二是擁有了更加強大的共享。(這里的共享指的一個是不同設備間的數(shù)據(jù)共享,一個是同設備里,不同程序之間的文件共享)



iOS8 加入了可交互通知功能,可以直接在通知欄對通知進行處理。當收到短信時,可以直接回復,而當 Facebook 等社交網(wǎng)絡更新時,可以直接評論或者點贊。不需要再像以往那樣頻繁的停止當前任務、切換應用,大大提升了使用效率和舒適度。


提高輸入效率。這是iOS8里面的一項新技術(shù),名叫 QuickType。通過簡單的人工智能來對你的輸入內(nèi)容進行干預,大大提高輸入效率。它有兩種方式:一種情況是預測你接下來要輸入的詞組,做預先提示,如,當你輸入drink的時候,自動提示coffee。另一種情況是當上文涉及選擇、判斷的時候,自動為你預選答案,比如女朋友問do you want to go for dinner or a movie,會自動顯示a movie、dinner、not sure供選擇。

蘋果表示會根據(jù)你的輸入習慣自動學習你的說話風格,蘋果稱QuickType 支持 14 種語言,包括中文(但事實上,中文的語義是多種多樣的,所以估計對中文的支持不會特別好)。

特別還要說的一點是。蘋果在iOS8里面首次支持第三方輸入法。


照片管理:可以按照照片拍攝的日期或時間、地點或相簿名稱進行搜索。

照片處理:智能調(diào)整和濾鏡:可以對亮度和色彩進行調(diào)解,無需電腦就能輕松調(diào)節(jié)圖片效果。

智能構(gòu)圖:調(diào)節(jié)水平

延時攝影:通過以動態(tài)選定的時間間隔來捕捉一系列畫面。然后再將隨著時間推移拍攝的照片串聯(lián)起來,合成加速播放的視頻。


iOS 早就具備了完善的全局搜索功能,可以對設備當中的所有內(nèi)容進行搜索。

iOS8 的搜索強化了本地同網(wǎng)絡間的無縫結(jié)合,在搜索的過程中可以即時顯示網(wǎng)絡搜索結(jié)果,比如維基百科的釋義或者 Google 搜索的結(jié)果等。


全新的imessages使溝通變得更高效。支持發(fā)送語音、視頻,支持多人會話。

值得一提的是imessage發(fā)送語音和視頻的交互方式。按住以后,向上滑動是發(fā)送,向左滑動是刪除。相比微信發(fā)送語音的交互,刪除和發(fā)送的功能一目了然。



登錄相同賬戶的 iPhone、iPad、Mac 之間可以共享幾乎所有內(nèi)容。

1、Mac 或 iPad 可以使用 iPhone 打電話。

2、正在編輯和顯示的內(nèi)容可以無縫轉(zhuǎn)移,比如 iPhone 上編輯的郵件可以馬上在 Mac 上寫下去,iPad 上瀏覽的文檔打開 iPhone 接著看。這個功能叫做handoff功能。在郵件、Safari、Pages、Numbers、Keynote、地圖、信息、提醒事項、日歷以及通訊錄等你喜愛的 app 使用 Handoff 功能。開發(fā)者也可以將 Handoff 構(gòu)建到他們的 app 之中。


蘋果新增的家庭共享功能能夠有效的提升大家的親情度。

在把家庭成員增添到同一個家庭組別之后,小組當中的成員可以輕松的共享已購買的app和書籍,圖片、文檔等。同時可以對家庭中孩子的使用進行監(jiān)管,比如當孩子購買游戲時,家長的 iOS 設備會提示并詢問是否允許使用信用卡。

這里講的家庭成員之間可以分享所有數(shù)據(jù)。蘋果就是說,不僅是你自己要買我的設備,要是你全家一起買就更好了。


健康。最近兩年可穿戴設備很火,市場上也有眾多健康類的app。iOS8也是針對健康類的需求做了一個Health這個功能。

這個Health有社么用處呢?

1. 將你手機上所有的健康類app獲取的數(shù)據(jù)匯集在一起。比如你的健康和健身 app 收集的心率、燃燒的卡路里、血糖、膽固醇等等。在health里面你可以將目前健康概況看得明明白白。在health里面也可以選擇是否將數(shù)據(jù)共享給其他APP

2.你還可以制作一張急救卡,列明你的血型或過敏癥狀等重要健康資料,從鎖定屏幕上即可查看(具體怎么鎖屏查看我們還要期待一下正式版的iOS8)。

3.在不額外添加任何第三方傳感器的情況下,我們可以在 Health 應用中監(jiān)測自己每天的步行步數(shù),以及行走的距離。


蘋果在原有 iCloud 云服務基礎(chǔ)上,強化出 iCloud Drive 云服務, App 可以把視同于本地磁盤,直接在上面存儲數(shù)據(jù),而其他 App 也可以方便的調(diào)用當中存儲的內(nèi)容。蘋果用曲線救國的方式,提供了解決 iOS 程序間共享不暢通問題的又一思路。

9月3號的時候爆出新聞,蘋果向Apple Seed的用戶發(fā)出邀請,邀請他們也可以在Windows測試下蘋果的一些功能。其中包括如iCloud Drive。為拉攏Windows用戶,蘋果邀用戶測試Win版iCloud。


iOS8 仍有諸多特性沒有公開。由于上次iOS8發(fā)布的時候,WWDC 演示設備還沒有大屏的iPhone,蘋果并沒有在當中演示和加入諸如對于大屏操作優(yōu)化、對于可穿戴設備優(yōu)化的功能。今晚的 蘋果發(fā)布會,我們還是期待正式版的 iOS8 給我們帶來更多驚喜。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容