2014-6-16 藍(lán)藍(lán)設(shè)計的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
相信大家一談到手機(jī)基本就是以蘋果iphone 為話題，因為人人都夸它系統(tǒng)好，UI設(shè)計好看又人性化，深深的映入了人的心里。隨著蘋果手機(jī)系統(tǒng)iOS7在中秋節(jié)的發(fā)布，新的設(shè)計潮流席卷而來。
前一段時間，spark界面設(shè)計公司 邵飛，同時又是星獅創(chuàng)想（www.si27.com）的UI設(shè)計深資授課老師，在網(wǎng)上發(fā)布了一篇關(guān)于《IOS7視覺/交互設(shè)計測試講解》的文章，這是邵飛老師自己用過IOS7之后寫出了自己的想法和體會,下面跟大家一起分享邵飛老師的這篇文章吧。
首先個人對 iOS7的整體視覺風(fēng)格是非常喜歡的，還記得之前WWDC發(fā)布會上iOS7的亮相，戳瞎了很多用戶的眼睛，當(dāng)時心中難免會有一絲失望，現(xiàn)在想想，可能是因 為老喬的離去，融入了一些個人情感在里面。蘋果一直有他自己的規(guī)則，規(guī)范著用戶和開發(fā)者，例如我們的icon在桌面上永遠(yuǎn)被限制在 114px＊114px、20px圓角的區(qū)域里，但是這讓apple產(chǎn)品更加精美，更加規(guī)范。iOS7的整體視覺無疑圍繞著”扁平化”這三個字，那么”扁 平化”的理念是什么，僅僅就是變的更加簡潔？”扁平化”的視覺設(shè)計更給我們帶來什么？對此我有我自己的看法。
為了讓圖標(biāo)更吸引人、識別性更 高，視覺設(shè)計工作者為用戶提供了一種與物體非常貼近的設(shè)計－”擬物化”設(shè)計，那些精致的圖標(biāo)一直讓用戶愛不釋手，我作為一名設(shè)計者，一直瘋狂迷戀著”擬物 化”，這些擬物的圖標(biāo)能讓我們感覺它是真的，看得見摸得著的。而”扁平化”有兩個元素，彌補了”擬物化”的不足，我認(rèn)為是”形狀”與”顏色”的概念。
以下是我設(shè)計的一款《教父》主題，
也 是用到了”擬物化”的設(shè)計，從單個圖標(biāo)去看的話，”擬物化”風(fēng)格的圖標(biāo)識別度很高，因為它更貼近于實物，我研究過很多用戶，他們在進(jìn)入桌面后，需要尋找的 圖標(biāo)就在眼皮底下，還是會不停的滑動尋找圖標(biāo)，他們在尋找圖標(biāo)的時候，腦子里的畫面只是這個圖標(biāo)傳達(dá)給我們的一些信息，如果元素太多就會讓我們思考混亂。
我們研究后，大多數(shù)用戶在尋找微信的時候，腦海里會浮現(xiàn)兩個長了點點的大小圈圈，還有飽和度非常高的綠色。他們不會對自己說：我要找的是兩個”話 語”icon，疊加在一起，一個在前一個在后，后面的大一點顏色略深，前面的小一點略亮。拜托～誰會去想這些細(xì)節(jié)，用戶得到的只是一種抽象的感官。
再看看這個”記事本”圖標(biāo)，寫實的鋼筆，紙也添加了材質(zhì)，鋼筆留下了投影，而大多數(shù)用戶在尋找這個圖標(biāo)，腦海中的畫面是這樣的,第二個圖標(biāo)是不是很像啥東東？ 事實上這個圖標(biāo)第一次傳達(dá)給用戶信息的時候是在用戶看到這個圖標(biāo)的時候，會產(chǎn)生”哇，很精美”"很想去用這個鋼筆寫點東西”。而在尋找圖標(biāo)的時候，腦海中是那抽象的”啥東東”。那么我之前說的”形狀”的概念就產(chǎn)生了。
第二個概念就是顏色，ios7在顏色上被吐槽指數(shù)上算是最高的了，但是現(xiàn)在看來，無疑在用戶體驗的視覺層進(jìn)行了一次革命。
再來看看《教父》，因為希望通過視覺達(dá)到風(fēng)格統(tǒng)一，而在用戶體驗上有很大的降低，如果界面上都是同一樣色調(diào)icon，那么用戶就不能第一時間找到自己需要的icon，就會不停的翻頁。
ios7用了飽和度很高的顏色，它們可以迅速從不同壁紙里脫穎而出，用戶可以迅速用顏色匹配功能icon，快速的定位與查找。
通過形狀與顏色這兩個元素，讓ios7的視覺設(shè)計得到了更高層的提升，讓用戶不再因為icon中復(fù)雜的視覺效果而進(jìn)行思考，我記得當(dāng)年玩war3的時候，我媽媽站在后面看，說了一句：花花綠綠的都不知道是誰打誰。現(xiàn)在我體會到媽媽口中的”花花綠綠”不是顏色，而是復(fù)雜、絢麗的效果帶給她的視覺擾亂?！睌M物 化”的視覺效果會給用戶帶來思考負(fù)擔(dān)，所以用戶選擇不思考，這樣用戶會不知道方向，然后不停的去翻頁查找。 說到”方向”，ios7里也通過視覺設(shè)計了” 方向”這個概念，當(dāng)我們點擊一個圖標(biāo)的時候，它會根據(jù)圖標(biāo)位置進(jìn)行路徑放大，回到桌面的時候，也用了滾動時差，沿著路徑回去，這讓我想到《星際迷航》中設(shè) 定曲線，然后到達(dá)目的地的科級感，ios7將深入其林的感覺帶給了大家。
ios7 在交互上也重新定義了”方向”的概念，頭部向下滑動出現(xiàn)消息菜單，左右滑動需要作為桌面切換功能。，以往底部有后臺程序區(qū)，但是沒有向上滑動的操作手勢， 如對ios系統(tǒng)不熟悉的用戶，在往下滑動可出現(xiàn)菜單后，肯定會聯(lián)想到是否往上滑動也會出現(xiàn)菜單？ios7加入了底部往上滑動出現(xiàn)快捷功能菜單后，系統(tǒng)會更 加好用，這樣系統(tǒng)邏輯性會更強，上下左右都會有功能，讓用戶減少思考。
雙擊HOME鍵之后的后臺程序也進(jìn)行了改動，這個改動非常之偉大。ios7之前，后臺菜單出現(xiàn)后，整個屏幕除后臺外都會半隱去，而且是無法操作的，因為點擊一次，后臺就會收回，也就是說8/10屏只是返回的功能，大量的浪費空間。
ios7 則將這8/10的空間運用了起來，加入了程序的截圖，這樣會比icon更加有識別性，不同之處在于ios7之前一屏能容納4個icon，ios7一屏容納 3個icon。之前關(guān)閉程序需要按住icon不放，很隱蔽，而現(xiàn)在加入了情感設(shè)計，不要的東西就仍出去，只要手向上推動就可以關(guān)掉程序，避免了2次點擊的同時讓交互更加的有識別性。
ios7的發(fā)布，對于做互聯(lián)網(wǎng)產(chǎn)品的公司和團(tuán)隊有著莫大的關(guān)系，apple一直有著自己的規(guī)則，產(chǎn)品的icon 成為了重中之重，在商店里，用戶試玩不了，只能通過幾張截圖與圖標(biāo)來判斷，ios7的視覺風(fēng)格出來后，很多圖標(biāo)在桌面上都顯得”不倫不類”，比如微信 icon剛出來的時候，被噴顏色亮瞎了，而在ios7的短信圖標(biāo)下顯得那么的沉穩(wěn)～。為了讓自己產(chǎn)品的圖標(biāo)在iOS7下更讓用戶喜愛，我們可以進(jìn)行以下風(fēng) 格定位。
底背景用純色，圖案盡量簡潔，我這里隨意畫了一個群組的icon用來做演示。
IOS7中的icon已經(jīng)沒有2像素投影了，而且ios7中的一些圖標(biāo)也大膽的用了黑、白、灰，所以產(chǎn)品的icon也可以往上靠，這樣風(fēng)格統(tǒng)一也不會顯得奇怪。
我們也可以做偽厚度，在114px*114px的大小里挪動幾像素，顏色加深做個厚度，這樣在不影響風(fēng)格的情況下，在桌面圖表中又能脫穎而出，你懂的。
通過邵飛老師這篇文章，相信大家對UI設(shè)計和用戶體驗設(shè)計在這個時代的總要性是不言而喻的，如果想設(shè)計出貼近用戶體驗的東西，更人性化。那么你學(xué)習(xí)提升UI設(shè)計、用戶體驗設(shè)計是必須的，如何提升自己的ui設(shè)計能力呢？這也是每個設(shè)計師所煩惱的事情，星獅創(chuàng)想作為國內(nèi)首家UI設(shè)計培訓(xùn)、UED培訓(xùn)遠(yuǎn)程教育機(jī)構(gòu)，經(jīng)過近四年的發(fā)展，先后開設(shè)以UI設(shè)計師、網(wǎng)頁設(shè)計師、互動設(shè)計師、前端開發(fā)工程師、用戶體驗與交互設(shè)計師、安卓開發(fā)工程師等精準(zhǔn)定位的培訓(xùn)課程。致力于培養(yǎng)符合創(chuàng)意產(chǎn)業(yè)和教育標(biāo)準(zhǔn)的中國移動互聯(lián)網(wǎng)領(lǐng)域人才。邵飛老師同時也是我們星獅創(chuàng)想的UI設(shè)計授課老師，如果你想跟邵飛老師一起學(xué)習(xí)和交流UI設(shè)計方面的知識，可以來星獅創(chuàng)想了解一下。
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com