手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

UI設(shè)計之蘋果ISO7視覺/交互設(shè)計測試講解

2014-6-16    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   www.88yangsc.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

來源:http://labs.chinamobile.com/news/design/97279

相信大家一談到手機(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.88yangsc.com

存檔