2022-06-19 分類: 網(wǎng)站建設(shè)
在開始這篇雜談前,想和大家以微信為例,分享在其產(chǎn)品界面風(fēng)格上比較重要的一個(gè)變化,如下圖所示微信版本4.5和版本5.3的界面效果對比。
細(xì)心的朋友可能會(huì)看出來我選擇的4.5和5.3兩個(gè)版本,實(shí)際上在這中間還有4.5.1~5.2.1近8個(gè)不同的大小版本,都是在上一個(gè)版本的基礎(chǔ)上不斷優(yōu)化。那為什么選取這兩個(gè)界面展現(xiàn),因?yàn)閷Ρ鹊男Ч鼜?qiáng)烈一些——我想強(qiáng)調(diào)個(gè)人對比后的感覺:用著更爽了!
為什么會(huì)更爽?估計(jì)每個(gè)人都會(huì)想到說界面設(shè)計(jì)更簡潔了,更清爽,更好看,于是我們似乎有了個(gè)結(jié)論,說整個(gè)產(chǎn)品視覺上更扁平化了。這也牽扯出來今天所要討論的話題——扁平化設(shè)計(jì)。
不知道怎么,最近兩年“扁平化”這個(gè)說法是N多產(chǎn)品經(jīng)理、視覺設(shè)計(jì)、老板必須要提到的概念,如果自己的產(chǎn)品界面設(shè)計(jì)不是扁平化的,就顯得老土,out了。而且關(guān)于這個(gè)概念,很多人都能提出自己的一套觀點(diǎn)。就筆者在對將近20多個(gè)視覺設(shè)計(jì)師的面試,關(guān)于這個(gè)問題的解答就不盡相同,個(gè)人感覺大多還停留在諸如“大圖標(biāo)”、“色塊”、“去裝飾效果”等比較常見的觀點(diǎn)上——這些固然沒有錯(cuò)誤。今天也想在經(jīng)過若干時(shí)間研究和實(shí)踐的基礎(chǔ)上提出個(gè)人的一些看法,思路瑣碎,故為雜談。
現(xiàn)在談來自“星星的你”好像有點(diǎn)過時(shí),不過正好,可以去掉一些跟隨潮流的“嫌疑”,實(shí)際上下面這個(gè)問題恰恰是所謂“扁平化設(shè)計(jì)的潮流問題”。如果在這個(gè)韓劇未開播之前,有位屌絲拿著炸雞和啤酒,或許會(huì)被人BS,但這之后鋪天蓋地的廣告使得炸雞加啤酒似乎成為了時(shí)尚。
話說回來,在軟件產(chǎn)品最開始引入扁平化設(shè)計(jì)的莫過于微軟了,2010年2月15日,微軟在MWC 2010大會(huì)上CEO鮑爾默親臨現(xiàn)場發(fā)布其全新的手機(jī)操作系統(tǒng)Windows Phone 7,我們來回顧一下當(dāng)時(shí)有網(wǎng)站專門做的其與iPhone之間的對比:
1、鎖屏界面
2、聯(lián)系人界面
3、音樂視頻選擇
4、圖片界面
如今來看,微軟無疑是最早拿著啤酒和炸雞蹲在街邊享受的“屌絲”,因?yàn)楹竺娴氖袌雠c用戶反應(yīng)都平淡無奇,Windows Phone 7甚至得到了不少科技評論界的嘲笑。
不過這樣的屌絲貌似不止一個(gè),2011年Android 4.0推出的時(shí)候,人們把Holo Theme 當(dāng)做安卓為了體現(xiàn)于IOS不同所采用的伎倆。
真正引領(lǐng)了設(shè)計(jì)潮流的還是當(dāng)2013年9月11日蘋果推出的IOS7,這也是IOS面世以來在用戶界面上做出改變大的一個(gè)操作系統(tǒng),大的變化就是拋棄了以往的擬物風(fēng)格(skeuomorphism)而采用了全新的扁平化。這個(gè)“都教授”一出場,扁平化之風(fēng)就席卷了全球, 扁平化設(shè)計(jì)仿佛具有令人癡迷的魅力,讓無數(shù)產(chǎn)品經(jīng)理和設(shè)計(jì)師競相效仿,僅在百度中文搜索“扁平化”關(guān)鍵字,返回結(jié)果就達(dá)16,700,000個(gè)之多!
IOS6與IOS7界面
軟件產(chǎn)品的扁平化,我們認(rèn)為是從2010年由微軟開始,但是關(guān)于扁平化設(shè)計(jì)實(shí)際上很早就有了,只不過不是在軟件行業(yè),而是在建筑設(shè)計(jì)等藝術(shù)領(lǐng)域。不過這時(shí)候的扁平化有另外一個(gè)說法叫“極簡設(shè)計(jì)”或者“極簡主義(Minimalism)”。即使現(xiàn)在,很多軟件設(shè)計(jì)領(lǐng)域還有很多人還把極簡設(shè)計(jì)(Minimal Design)與扁平化設(shè)計(jì)(Flat Design)劃為等號(hào)。
極簡主義是20世紀(jì)中期整個(gè)美國藝術(shù)領(lǐng)域一個(gè)風(fēng)靡的設(shè)計(jì)理念,最初是對抽象表現(xiàn)主義的一種反應(yīng),主張一種形式上的客觀與單純。各個(gè)領(lǐng)域,比如繪畫、雕塑,服裝設(shè)計(jì)(我們現(xiàn)在熟知的Calvin Klein也是極簡主義下簡約風(fēng)格)都深受極簡的影響,下面著重提一下建筑設(shè)計(jì)。
20世紀(jì)中期著名建筑師路德維希?密斯?凡德羅有一句經(jīng)典名言“l(fā)ess is more”,深化和升華了在建筑設(shè)計(jì)領(lǐng)域的一個(gè)理念即極簡主義——提倡簡單,反對過度裝飾。(極簡主義更早可以追溯到12世紀(jì)歐洲的宗教改革思潮,主要是面向雕塑和繪畫。)
德維希?密斯?凡德羅
德維希?密斯?凡德羅代表作-范斯沃斯住宅
如此跨界,各位是否會(huì)會(huì)心一笑的同感,其實(shí)本無意外,根源在于不同時(shí)代背景下的人性化需求。
現(xiàn)代軟件所承載及要傳達(dá)的信息量急速爆炸增長,如何在短時(shí)間內(nèi)讓用戶快速獲取所需內(nèi)容,是每個(gè)產(chǎn)品設(shè)計(jì)人員的核心關(guān)注點(diǎn)。無論視覺展現(xiàn)還是交互過程,如果增加了認(rèn)知及學(xué)習(xí)成本,用的不爽,心煩意亂,難免會(huì)遭到用戶摒棄而轉(zhuǎn)移到競爭對手產(chǎn)品。當(dāng)信息成為界面主體并且要求更多的視覺關(guān)注力時(shí),過去純粹裝飾性設(shè)計(jì)開始成為內(nèi)容化界面的重負(fù),因此必然會(huì)受到逐步減弱和剝離。近年來很多人提出“沉浸式瀏覽”這個(gè)概念,與扁平化有著非常密切的聯(lián)系,甚至可以說沉浸式是扁平化的核心,即讓用戶更關(guān)注內(nèi)容層面的體驗(yàn),盡量減少所有過度裝飾對用戶工作任務(wù)的干擾。例如如下關(guān)于IE9體驗(yàn)設(shè)計(jì)的一段描述(百度),“IE9界面設(shè)計(jì)簡潔,為網(wǎng)站提供更大的顯示區(qū)域,從而讓用戶聚焦于應(yīng)用本身,而不是瀏覽器。瀏覽器控件減少并且處于半透明狀態(tài),避免干擾用戶的視線,真正讓內(nèi)容成為用戶關(guān)注的焦點(diǎn)?!?/p>
找到騰訊分析數(shù)據(jù)平臺(tái)部關(guān)于2013年移動(dòng)設(shè)備屏幕分辨率分布的一張統(tǒng)計(jì)圖,如下。
2013年Android設(shè)備屏幕分辨率分布數(shù)據(jù)
百度統(tǒng)計(jì)流量研究院關(guān)于2014年1月到5月之間關(guān)于PC端分辨率使用分布情況,如下圖所示。
這些分析是給大家一個(gè)直觀的印象——當(dāng)前設(shè)備,尤其是移動(dòng)設(shè)備的分辨率規(guī)格千奇百怪,大量不同分辨率(尺寸)觸摸屏產(chǎn)品的上市使得產(chǎn)品生態(tài)鏈更加齊備和完整。而這勢必帶來一個(gè)問題,頁面如何根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整?這非常令人頭疼,響應(yīng)式設(shè)計(jì)(Responsive Design)也由此而生。知乎上有位網(wǎng)友提出:“扁平化設(shè)計(jì)風(fēng)格與響應(yīng)式設(shè)計(jì)在同一時(shí)間點(diǎn)產(chǎn)生,是巧合,還是為了服務(wù)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的高效性?”可惜沒有人回答,這里我嘗試討論一下這個(gè)問題。
響應(yīng)式更適合什么樣的頁面設(shè)計(jì)?首先網(wǎng)站設(shè)計(jì)要更具規(guī)則性,柵格式布局設(shè)計(jì)是比較好的方式,如此寬屏與窄屏適應(yīng)性更強(qiáng)(柵格在窄的時(shí)候往下調(diào)整);其次頁面更加要有層次感,利落清爽,多度的裝飾,過炫的設(shè)計(jì)是不需要的。基于以上兩點(diǎn),扁平化與響應(yīng)式相遇了,正因?yàn)槠鹾隙热绱酥?,兩者?lián)手引領(lǐng)了一個(gè)時(shí)期的潮流。
可以肯定的是,很多人有個(gè)誤區(qū)——扁平化只是視覺層面的扁平,實(shí)際上不僅視覺扁平,我們還更應(yīng)關(guān)注交互層面的扁平。如下圖所示,用戶對某個(gè)信息或者功能的獲取邏輯示意。
用戶通過一系列的操作(方式包括點(diǎn)擊、搖一搖、滑動(dòng)、觸摸等)來到達(dá)某個(gè)特定的信息或者功能點(diǎn)。而從軟件設(shè)計(jì)本身,對信息進(jìn)行對象建模,劃分了數(shù)據(jù)對象的層級(jí)結(jié)構(gòu);對功能進(jìn)行定義,確定了功能的層次模型。如果軟件交互設(shè)計(jì)中體現(xiàn)的信息或功能的層級(jí)與實(shí)際在對象與功能建模中的完全對應(yīng),則很有可能用戶獲取一個(gè)信息或功能點(diǎn)會(huì)非常繁瑣。比如我們在Android 4.1中設(shè)置飛行模式,如下界面中的三種路徑。
所以在交互設(shè)計(jì)中,設(shè)計(jì)不同的到達(dá)路徑會(huì)直接影響用戶對產(chǎn)品使用的體驗(yàn),我們把合理的,用戶能夠到達(dá)最短路徑的優(yōu)化稱之為交互的扁平化設(shè)計(jì),可以通俗的講就是把交互做淺。視覺中國有一篇文章叫“高大上的扁平化交互設(shè)計(jì)”,專門講解關(guān)于交互扁平化的一些設(shè)計(jì)方法,筆者在這里重新整理一下,實(shí)際上可以分為兩大類,如下圖所示。
在產(chǎn)品的概念建模階段,如果能考慮到后續(xù)可能的交互問題,如此從根本上對整體設(shè)計(jì)就有了更優(yōu)的考慮。交互路徑優(yōu)化中信息的分類組織是一個(gè)更廣闊的話題,在Giles Colborne的“簡約至上”一書中,對此進(jìn)行了非常系統(tǒng)的論述:平鋪、淺目錄、有序組織等都可以劃分到這個(gè)范疇。建議參考“美圖看看”的目錄穿透功能設(shè)計(jì),我們假定一個(gè)場景:下載了一個(gè)文件夾,里面有50個(gè)子文件夾,每個(gè)子文件夾都有嵌套的50層級(jí)的文件夾,每個(gè)文件夾中有20個(gè)圖片。如果我們想看到所有的圖片則需要點(diǎn)擊多少次?不可想象。但是如果使用美圖看看的穿透功能,所有圖片都會(huì)直接在一個(gè)界面中平鋪顯示,如此看圖的效率會(huì)大大提升。這個(gè)小功能實(shí)際上就是采用了平鋪和淺目錄的設(shè)計(jì)。還有個(gè)例子是老羅的錘子手機(jī)系統(tǒng)拍照與視頻選擇界面,下圖是與MIUI V5的對比。
錘子系統(tǒng)與MIUI拍照攝像界面
兩者的到達(dá)路徑不用說,錘子更勝一籌,值得肯定的是錘子系統(tǒng)對細(xì)節(jié)的人性化考慮非常深刻,所以建議在設(shè)計(jì)產(chǎn)品時(shí),不斷多問問自己和他人,有沒有更有的路徑怎么會(huì)更簡單?
當(dāng)然話又說回來,并不是所有的設(shè)計(jì)都要簡潔到不能再簡潔,因?yàn)橛锌赡芤l(fā)另外一個(gè)問題,讓用戶失去對一件事物的控制感。比如Colborne提到,“東京蘋果專賣店的玻璃電梯,獨(dú)特之處在于它沒有按鈕:電梯外面沒有呼叫電梯的按鈕,電梯里也沒有任何控制按鈕。這臺(tái)升降機(jī)毎個(gè)摟層都會(huì)自動(dòng)停一下。蘋果已經(jīng)把這部電梯精簡到了極致,但是,這部電梯并沒有給人簡單的感覺,而是讓人覺得它神經(jīng)錯(cuò)亂。它在我想去的那一層停不停?為什么在沒人上下的樓層還要停呢?”
另:關(guān)于視覺設(shè)計(jì)的扁平化,網(wǎng)上有N多文章,隨便百度即可。
趕一趕潮流確實(shí)是一件很cool的事情,可以讓自己的產(chǎn)品顯得更時(shí)尚,連擬物做到非常極致的錘子系統(tǒng)亦或改變,老羅在2013年IOS7推出不久發(fā)微博稱,局部的擬物做得再爛也只是好和壞的問題,而全局扁平化(作為一個(gè)成熟公司的行為),是對和錯(cuò)的問題,暗示悄悄在錘子內(nèi)部啟動(dòng)了扁平化風(fēng)格。不過在今年前不久發(fā)布的錘子手機(jī)T1還未扁平。可能是由于時(shí)間成本,或者面子的問題,抑或錘子的堅(jiān)持(后來這老兄又說只要他在一天,錘子系統(tǒng)就永遠(yuǎn)不會(huì)扁平化)。
個(gè)人而言,采用什么樣的設(shè)計(jì)風(fēng)格,是由產(chǎn)品本身的目標(biāo)以及要解決的問題來決定的,美與丑、操作難易并不完全決定了一個(gè)產(chǎn)品的成敗。有一個(gè)非常的經(jīng)典案例是趕集網(wǎng)產(chǎn)品總監(jiān)布棉老師在一次講課提到的美國最火的分類網(wǎng)站Craigslist,如果從扁平化的角度來看,真的是丑爆了。該網(wǎng)站上沒有圖片(最新版加上了一個(gè)地圖),只有密密麻麻的文字,但雖然看上去頗為乏味,可是卻是美國人最喜歡的網(wǎng)站之一。
Craigslist網(wǎng)站界面
為什么?因?yàn)槟苷嬲鉀Q用戶的問題。
所以視覺、交互等問題在如此的整體規(guī)劃下,顯得不那么“重要”。決定產(chǎn)品成敗的因素確實(shí)非常多,但是如何基于用戶人性化特點(diǎn)的角度來考慮,是非常重要的一點(diǎn)。前兩年有個(gè)比較清新的網(wǎng)站叫“優(yōu)擇網(wǎng)(youze.cc)”,可以讓人選購數(shù)碼產(chǎn)品更直觀,方便了解到幾款產(chǎn)品之間的差別,快速找到適合自己產(chǎn)品。
優(yōu)擇網(wǎng)界面
個(gè)人非常喜歡這個(gè)網(wǎng)站的功能設(shè)計(jì),很簡單,直接和易用。但是現(xiàn)在已經(jīng)消失了,估計(jì)是創(chuàng)業(yè)已經(jīng)失敗。為什么?其它的原因不知道,但我的觀點(diǎn)是整個(gè)網(wǎng)站的思路太理性化了,選購商品往往不是完全參數(shù)對比方式,我們或許更在乎別人的說法,測評的結(jié)論,心情……,雖然后來優(yōu)擇也有一個(gè)論壇,但是根基的問題傳達(dá)是產(chǎn)品定位的偏差?;蛟S創(chuàng)業(yè)團(tuán)隊(duì)是計(jì)算機(jī)專業(yè)比較偏技術(shù)從而忽略了人文的因素。
另:扁平化不意味著純粹的扁平化,目前有很多的概念比如類扁平化、偽扁平化、準(zhǔn)扁平化、Almost Flat等等,實(shí)際上還是圍繞扁平化的變體或者延伸。
平心而論,擬物、扁平抑或以后出現(xiàn)的什么新風(fēng)格,都是軟件產(chǎn)品或者說藝術(shù)設(shè)計(jì)不斷演變發(fā)展的演進(jìn)而已??梢钥隙ǖ氖牵覀冊诓痪?,就會(huì)去推崇另外一個(gè)新的軟件產(chǎn)品設(shè)計(jì)風(fēng)格,有些有趣,也有些可笑。但是歷史就是不斷的在輪回,我們看一下微軟Windows操作系統(tǒng)的界面演變
有兩個(gè)輪回,我們可以看到界面效果上,在Windows 2上還算是一種“扁平化”的風(fēng)格,不過可以肯定的是,當(dāng)時(shí)的界面設(shè)計(jì)絕對不是想要如今的這種扁平,而是局限于當(dāng)時(shí)技術(shù)狀態(tài)的表現(xiàn)罷了,之后Windows 98的擬物再到Windows 8的扁平,這似乎是驗(yàn)證了一種輪回。另一個(gè)輪回我們注意是版本號(hào),2→98→8,這個(gè)角度的輪回我實(shí)際上是思想認(rèn)識(shí)上的不斷提升而絕不是退步。
所以,既然該來的總會(huì)來,那就去享受擁抱,在不斷變換的潮流中恪守以人性為根本的產(chǎn)品設(shè)計(jì)理念,明晰自己的選擇,以不變應(yīng)萬變,你的產(chǎn)品會(huì)一直立于不敗之地。
網(wǎng)站標(biāo)題:軟件產(chǎn)品扁平化設(shè)計(jì)雜談
鏈接URL:http://www.rwnh.cn/news18/169018.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站改版、網(wǎng)站制作、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容