IOS7視覺/交互設計測試講解
IOS7視覺/交互設計測試講解-移動閱讀二維碼

ios701

隨著iOS7中秋節的發布,新的設計潮流席卷而來,我立刻將ipad、iphone升級成iOS7,其實在正式發布之前iOS7已經很多人開始使用了,而這的正式發布,將會有更多的用戶來體驗。接下來,我將針對iOS7的新UI將會給我們帶來哪些新體驗,我們需要注意些什么。

首先個人對iOS7的整體視覺風格是非常喜歡的,還記得之前WWDC發布會上iOS7的亮相,戳瞎了很多用戶的眼睛,當時心中難免會有一絲失望,現在想想,可能是因為老喬的離去,融入了一些個人情感在里面。蘋果一直有他自己的規則,規范著用戶和開發者,例如我們的icon在桌面上永遠被限制在114px*114px、20px圓角的區域里,但是這讓apple產品更加精美,更加規范。iOS7的整體視覺無疑圍繞著”扁平化”這三個字,那么”扁平化”的理念是什么,僅僅就是變的更加簡潔?”扁平化”的視覺設計更給我們帶來什么?對此我有我自己的看法。

為了讓圖標更吸引人、識別性更高,視覺設計工作者為用戶提供了一種與物體非常貼近的設計-”擬物化”設計,那些精致的圖標一直讓用戶愛不釋手,我作為一名設計者,一直瘋狂迷戀著”擬物化”,這些擬物的圖標能讓我們感覺它是真的,看得見摸得著的。而”扁平化”有兩個元素,彌補了”擬物化”的不足,我認為是”形狀”與”顏色”的概念。

以下是我設計的一款《教父》主題,

2

也是用到了”擬物化”的設計,從單個圖標去看的話,”擬物化”風格的圖標識別度很高,因為它更貼近于實物,我研究過很多用戶,他們在進入桌面后,需要尋找的圖標就在眼皮底下,還是會不停的滑動尋找圖標,他們在尋找圖標的時候,腦子里的畫面只是這個圖標傳達給我們的一些信息,如果元素太多就會讓我們思考混亂。

IOS703

我們研究后,大多數用戶在尋找微信的時候,腦海里會浮現兩個長了點點的大小圈圈,還有飽和度非常高的綠色。他們不會對自己說:我要找的是兩個”話語”icon,疊加在一起,一個在前一個在后,后面的大一點顏色略深,前面的小一點略亮。拜托~誰會去想這些細節,用戶得到的只是一種抽象的感官。

IOS704

再看看這個”記事本”圖標,寫實的鋼筆,紙也添加了材質,鋼筆留下了投影,而大多數用戶在尋找這個圖標,腦海中的畫面是這樣的ios705是不是很像一坨屎? 事實上這個圖標第一次傳達給用戶信息的時候是在用戶看到這個圖標的時候,會產生”哇,很精美””很想去用這個鋼筆寫點東西”。而在尋找圖標的時候,腦海中是那抽象的”一坨屎”。那么我之前說的”形狀”的概念就產生了。

IOS706

第二個概念就是顏色,ios7在顏色上被吐槽指數上算是最高的了,但是現在看來,無疑在用戶體驗的視覺層進行了一次革命。

IOS707

再來看看《教父》,因為希望通過視覺達到風格統一,而在用戶體驗上有很大的降低,如果界面上都是同一樣色調icon,那么用戶就不能第一時間找到自己需要的icon,就會不停的翻頁。

ios7用了飽和度很高的顏色,它們可以迅速從不同壁紙里脫穎而出,用戶可以迅速用顏色匹配功能icon,快速的定位與查找。

通過形狀與顏色這兩個元素,讓ios7的視覺設計得到了更高層的提升,讓用戶不再因為icon中復雜的視覺效果而進行思考,我記得當年玩war3的時候,我媽媽站在后面看,說了一句:花花綠綠的都不知道是誰打誰?,F在我體會到媽媽口中的”花花綠綠”不是顏色,而是復雜、絢麗的效果帶給她的視覺擾亂?!睌M物化”的視覺效果會給用戶帶來思考負擔,所以用戶選擇不思考,這樣用戶會不知道方向,然后不停的去翻頁查找。 說到”方向”,ios7里也通過視覺設計了”方向”這個概念,當我們點擊一個圖標的時候,它會根據圖標位置進行路徑放大,回到桌面的時候,也用了滾動時差,沿著路徑回去,這讓我想到《星際迷航》中設定曲線,然后到達目的地的科級感,ios7將深入其林的感覺帶給了大家。

IOS708

ios7在交互上也重新定義了”方向”的概念,頭部向下滑動出現消息菜單,左右滑動需要作為桌面切換功能。,以往底部有后臺程序區,但是沒有向上滑動的操作手勢,如對ios系統不熟悉的用戶,在往下滑動可出現菜單后,肯定會聯想到是否往上滑動也會出現菜單?ios7加入了底部往上滑動出現快捷功能菜單后,系統會更加好用,這樣系統邏輯性會更強,上下左右都會有功能,讓用戶減少思考。

IOS709

雙擊HOME鍵之后的后臺程序也進行了改動,這個改動非常之偉大。ios7之前,后臺菜單出現后,整個屏幕除后臺外都會半隱去,而且是無法操作的,因為點擊一次,后臺就會收回,也就是說8/10屏只是返回的功能,大量的浪費空間。

ios7則將這8/10的空間運用了起來,加入了程序的截圖,這樣會比icon更加有識別性,不同之處在于ios7之前一屏能容納4個icon,ios7一屏容納3個icon。之前關閉程序需要按住icon不放,很隱蔽,而現在加入了情感設計,不要的東西就仍出去,只要手向上推動就可以關掉程序,避免了2次點擊的同時讓交互更加的有識別性。

ios7的發布,對于做互聯網產品的公司和團隊有著莫大的關系,apple一直有著自己的規則,產品的icon成為了重中之重,在商店里,用戶試玩不了,只能通過幾張截圖與圖標來判斷,ios7的視覺風格出來后,很多圖標在桌面上都顯得”不倫不類”,比如微信icon剛出來的時候,被噴顏色亮瞎了,而在ios7的短信圖標下顯得那么的沉穩~。為了讓自己產品的圖標在iOS7下更讓用戶喜愛,我們可以進行以下風格定位。
底背景用純色,圖案盡量簡潔,我這里隨意畫了一個群組的icon用來做演示。

IOS710

IOS7中的icon已經沒有2像素投影了,而且ios7中的一些圖標也大膽的用了黑、白、灰,所以產品的icon也可以往上靠,這樣風格統一也不會顯得奇怪。

IOS711

我們也可以做偽厚度,在114px*114px的大小里挪動幾像素,顏色加深做個厚度,這樣在不影響風格的情況下,在桌面圖表中又能脫穎而出,你懂的。
感謝收看

 

本文鏈接:http://www.casaleticia.com/ios7-visual-interaction-design-test-explain.html
本文標簽: , , ,