Design for Xuture:IOS 11用戶界面設(shè)計(jì)指導(dǎo)六個(gè)原則和九個(gè)特征

3 評(píng)論 5868 瀏覽 38 收藏 11 分鐘

隨著X的問(wèn)世,IOS11設(shè)計(jì)規(guī)范也相應(yīng)更新,讀下來(lái)的第一感受是:很大篇幅都是針對(duì)X進(jìn)行的增補(bǔ),包含一絲絲未來(lái)移動(dòng)APP設(shè)計(jì)的氣息,即:Design for Xuture。

Design for Future六個(gè)原則

1. Aesthetic Integrity美學(xué)

(說(shuō)句題外話,優(yōu)美的Aesth詞根,讀起來(lái)發(fā)音都那樣與眾不同)這次的設(shè)計(jì)原則,“美”的原則升華了,比起以前的Guideline中,這次很直接的站在第一的位置上,短時(shí)間內(nèi)確定了IOS的基調(diào)。引入一個(gè)網(wǎng)絡(luò)短句:顏值即正義(以后誰(shuí)再敢把設(shè)計(jì)師叫做美工,請(qǐng)看看蘋(píng)果“美工”的地位?。?/p>

2. Consistency一致性

通篇讀下來(lái),蘋(píng)果所秉承的仍然是漸進(jìn)的創(chuàng)新,而不是激烈的突破。不給用戶突兀感,降低學(xué)習(xí)的成本。全文多次提到保持用戶的習(xí)慣,保持體驗(yàn)的一致性。

3. Direct Manipulation直接操作

交換設(shè)計(jì)基本原則之一。軟件能夠以本身的復(fù)雜性來(lái)提升用戶體驗(yàn)的成功案例真不多,即使再酷炫也不行。盡量讓app清晰直接,讓用戶瞬間達(dá)到他們所要達(dá)到的目的。

4. Feedback反饋

也是基本原則之一。沒(méi)人愿意對(duì)牛彈琴,對(duì)木頭說(shuō)話。

5. Metaphors隱喻

在我印象里隱喻這一條第一次處于如此低的地位??礃幼犹O(píng)果越來(lái)越重視直接,而不是虛無(wú)縹緲的感覺(jué)。畢竟全世界人每個(gè)個(gè)體差距太大,保持理解的一致性投入太多得不償失。

6. User Control用戶掌控

還是基本原則之一,每個(gè)人都有或多或少的掌控欲望,不要搶走用戶的這個(gè)基本權(quán)利。

以上六大原則,與以往幾年的Guideline比差別并不明顯,下面要說(shuō)說(shuō)我的個(gè)人理解:IOS11交互設(shè)計(jì)的九大特色。這九個(gè)特色鮮明而新潮,讓人驚喜,無(wú)處不體現(xiàn)“為未來(lái)而設(shè)計(jì)”,他們也是我忍不住敲下這篇文章的源動(dòng)力。


Design for Future九大特征

1. 沉浸式體驗(yàn)

大概從4、5年前就開(kāi)始了一種趨勢(shì),最窄的邊框都不能滿足用戶和廠商極端的追求,廠商們恨不得連手機(jī)邊框都去掉,只留一個(gè)大屏幕。

將來(lái)的APP設(shè)計(jì),更注重將用戶的全面注意力吸入到手機(jī)屏幕里,請(qǐng)觀察一下抱著手機(jī)不放的人的動(dòng)作,是不是身體向手機(jī)收攏,像被吸進(jìn)去一樣。他們將全身心集中于手上的小玩具上,仿佛從屏幕中就能獲得世界。現(xiàn)在還有VR技術(shù)、HDR技術(shù),真實(shí)的世界被替代也許離我們已經(jīng)非常近了。

2. 時(shí)空的打通

現(xiàn)在IOS中,很多信息相互之間都是打通的,如郵件中的人名能夠加入通訊錄、短信的日期和事件都可以加入日歷、支付可以通過(guò)掃碼進(jìn)行···這些都不斷的給用戶帶來(lái)便利,再也不是一個(gè)app只解決一個(gè)問(wèn)題,而是共同圍繞用戶的生活而展現(xiàn)服務(wù)。

往大了說(shuō),小米、夏普、索尼、蘋(píng)果等廠商,把無(wú)線充電、投影、NFC、面部識(shí)別、電視、Homekit等結(jié)合成生態(tài)圈,和軟件一起更智能的幫助用戶,來(lái)讓生活更加智能、更加便利。

以一次出國(guó)訂酒店為例。這個(gè)場(chǎng)景是:

我在booking上預(yù)定了一個(gè)酒店,然后通過(guò)郵箱,酒店給我發(fā)來(lái)了確認(rèn)單。然后日歷功能自動(dòng)讀取了郵件,并幫我把酒店日期、地址、電話等自動(dòng)記錄到了日歷中。同時(shí),wallet功能自動(dòng)識(shí)別并記錄了酒店憑證。我只是訂了一個(gè)酒店,然后突然發(fā)現(xiàn),日歷、wallet都有酒店的相關(guān)服務(wù),這讓我有了一種hin貼心、hin智能、hin驚喜的趕腳!

3. 多進(jìn)程并行

說(shuō)到多線程,想起來(lái)一個(gè)故事:幾年前我一個(gè)同學(xué),現(xiàn)在是某創(chuàng)業(yè)公司CEO,提出了將手機(jī)屏上下分隔,進(jìn)行不同服務(wù)的設(shè)計(jì)理念,據(jù)說(shuō)被南京三星公司某產(chǎn)品總監(jiān)“自信”否決。

5、6年過(guò)去了,手機(jī)端多進(jìn)程功能確實(shí)不是主流。但話又說(shuō)回來(lái),且不論主流不主流,隨著大屏手機(jī)的普及,隨著平板和PC之間的界限越來(lái)越模糊,一定會(huì)有越來(lái)越多的多線程的功能問(wèn)世。

多線程能夠滿足用戶的最簡(jiǎn)單的痛點(diǎn)(尤其現(xiàn)在視頻廣告時(shí)間是令人發(fā)指的長(zhǎng)):我看視頻(廣告)的時(shí)候想聊QQ/刷微博/發(fā)呆/微信···的時(shí)候怎么辦?人腦是多線程的、計(jì)算機(jī)是多線程的,為什么APP就不能多線程呢?

4. 弱打斷

記得第一次看到旺旺聊天界面里能夠在淘寶里浮動(dòng)出來(lái)時(shí),深深被驚艷到了,很佩服居然能這么舒服!

彈出提示——點(diǎn)開(kāi)聊天——聊完自然關(guān)閉——繼續(xù)逛淘寶,整個(gè)流程順理成章、水到渠成,完全不用要思考。

5. 反饋震動(dòng)

第一部分說(shuō)的6大原則里,提到過(guò)反饋。因?yàn)橛∠笾猩弦淮慰吹筋愃频姆答佋O(shè)計(jì)還是很粗淺的,所以對(duì)這次蘋(píng)果官方的反饋規(guī)范感覺(jué)非常的新奇。不同的提醒反饋,震動(dòng)的節(jié)奏都不一樣,而且復(fù)雜多了。

震動(dòng)反饋規(guī)范:

6. 手勢(shì)的創(chuàng)新

這次IOS11帶來(lái)了一個(gè)新的手勢(shì):Drag and Drop。又是一個(gè)偏重于自然而然就能理解的功能。它的操作是我們平時(shí)拿取一樣?xùn)|西在移動(dòng)端的映射,跟我們平時(shí)使用鼠標(biāo)的時(shí)候一樣:

抓取——拖動(dòng)——放手

跟現(xiàn)實(shí)中不同的是,可以拿起的東西不僅是照片這類實(shí)體,還可以是一段文字這類虛擬數(shù)據(jù)。這種交互方式,給了開(kāi)發(fā)者和用戶在移動(dòng)界面里不斷探索的深度。

7. 新UI風(fēng)格

記得前幾天看到一篇文章,國(guó)外大熱app諸如ins、airbnb等,界面設(shè)計(jì)已經(jīng)幾近極簡(jiǎn)。

Airbnb前后改版對(duì)比:

Instagram前后改版對(duì)比:

剛看到還真不適應(yīng),連品牌標(biāo)識(shí)都沒(méi)了真的好嗎?

很多人把這個(gè)設(shè)計(jì)趨勢(shì)叫做“去UI化”,我個(gè)人認(rèn)為并不準(zhǔn)確。少就是多,簡(jiǎn)單意味著更高要求。即使白色底+黑色的文字,更需要強(qiáng)調(diào)文字和排版,元素越少,對(duì)每個(gè)元素的考慮就越極致。

現(xiàn)在IOS11的界面,也朝著這個(gè)方向發(fā)展。最突出標(biāo)題文字,強(qiáng)調(diào)內(nèi)容。

看看國(guó)內(nèi)電商,簡(jiǎn)直就是夜總會(huì)風(fēng)格(咦?最想截圖的改的倒是快,沒(méi)抓到)

國(guó)內(nèi)某些電商APP首頁(yè)

8. 規(guī)范化

蘋(píng)果在Guidline里,表述了更加堅(jiān)定的鼓勵(lì)開(kāi)發(fā)者采用IOS規(guī)范的意愿,也可以說(shuō)更加強(qiáng)硬了。但反過(guò)來(lái)說(shuō),保持虛心學(xué)習(xí)的心態(tài)難道不好嗎?對(duì)我個(gè)人而言,做交互設(shè)計(jì)的目標(biāo)永遠(yuǎn)都是:

能達(dá)到蘋(píng)果官方的用戶體驗(yàn)標(biāo)準(zhǔn)

9. 漸進(jìn)式研發(fā)

“漸進(jìn)”

我第一次看到這個(gè)詞語(yǔ)是宏觀經(jīng)濟(jì)學(xué)的漸進(jìn)式改革理論

第二次看到是《華為工作法》里任正非提到的漸進(jìn)式研發(fā)思路

很多世界級(jí)的互聯(lián)網(wǎng)公司也一樣,新技術(shù)在落地時(shí),總是謹(jǐn)慎和漸進(jìn)的。蘋(píng)果從幾年前引入了widget,到今天引入了多進(jìn)程、NFC、無(wú)線充電技術(shù),每一次都是經(jīng)過(guò)深思熟慮后的改進(jìn)。

“謹(jǐn)慎”、“自制”、“漸進(jìn)”的創(chuàng)新,才是優(yōu)良的用戶體驗(yàn)

聲明,本人非果粉/果黑,以上內(nèi)容純粹是作為一個(gè)交互設(shè)計(jì)師,在初步瀏覽IOS11 User Interface 后的心得。因?yàn)橛⒄Z(yǔ)能力及設(shè)計(jì)能力有限,會(huì)有一些誤讀,理解的也不夠全面深入。在此懇請(qǐng)業(yè)界同行批評(píng)指正,也邀請(qǐng)大家一起學(xué)習(xí)。

資料參考:

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

https://developer.apple.com/ios/human-interface-guidelines/user-interaction/feedback/

http://mp.weixin.qq.com/s/8QeM7LSyNuZ5HUUwhuU6iQ

 

作者:?三也,微信公眾號(hào):小設(shè)計(jì)師玩轉(zhuǎn)金融圈

本文由 @?三也 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖由作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 來(lái)自廣東 回復(fù)
    1. 謝謝!

      回復(fù)