首頁

2021年如何做好作品集

前端達(dá)人

2021年如何做好作品集

今天分享的這篇文章非常長,我寫了1個星期。內(nèi)容比較多,慢慢看。2020年馬上結(jié)束了,今年的環(huán)境真的變化太快了,設(shè)計師們也習(xí)慣了就業(yè)環(huán)境的殘酷。曾幾何時UI設(shè)計師是一個非常高大上的名詞,但現(xiàn)在UI設(shè)計師意味著難就業(yè),工作難找。因?yàn)閁I設(shè)計師是依附于產(chǎn)品設(shè)計的一個崗位,當(dāng)經(jīng)濟(jì)上行,大多數(shù)公司急需人員開展項目,所以會放寬各種要求。盡快完成項目。


所以培訓(xùn)幾個月,就上崗拿月薪上萬的人大有人在。但是目前經(jīng)濟(jì)情況大家都知道了,所以很多公司開源節(jié)流,招聘需求盡可能的減少。有招聘崗位那也是萬里挑一。所以面試不僅僅是作品,還需要看你的學(xué)歷,看你的工作背景,你曾經(jīng)做過的項目。設(shè)計師已經(jīng)成為名副其實(shí)的競爭最激烈崗位了。你的學(xué)歷,你曾經(jīng)工作過的公司,這些是無法改變的過去式了,唯一還可以去改變的就是作品集了。那么2021年,我們的作品集到底該如何去做了?


作品匹配個人經(jīng)歷

設(shè)計師的作品集是個人能力的體現(xiàn),所以一些想走捷徑的人盜用一些其他人的作品,然后填充進(jìn)自己的作品集,因?yàn)橛X得作品越多越好。一個有經(jīng)驗(yàn)的面試官可以通過你的作品內(nèi)容的水平是否平均,來判斷你的作品是否真實(shí)。比如我見過很多字體設(shè)計非常一般的作品,但是到了專題突然標(biāo)題設(shè)計非常的復(fù)雜,這就明顯會讓人覺得不真實(shí)。


作品集的作品內(nèi)容盡量去匹配你的個人工作經(jīng)歷,比如你的上家工作是醫(yī)療行業(yè),但是了你的作品集內(nèi)容完全看不到。這樣別人會懷疑你的工作經(jīng)歷的真實(shí)性。有時候我也會收到一些作品,讓我看看是不是竹筍同學(xué)的作品。我也看到不少次一些作品集里放著京東或者網(wǎng)易的大廠作品,但是簡歷是完全看不到的。別人會對你進(jìn)行背調(diào),設(shè)計師現(xiàn)在有大量的渠道互通,背景去了解后,如果作假那么就會被拉黑的。



刪除小練習(xí)

有追求的設(shè)計師,都會在工作之外去學(xué)習(xí)一些技能去提高自己的專業(yè)能力。這些能力可能不會馬上去應(yīng)用在工作里。比如一些插畫,一些字體設(shè)計,或者C4D。但學(xué)習(xí)肯定是從基礎(chǔ)簡單開始,然后到技法復(fù)雜的作品。一些設(shè)計師舍不得小練習(xí),覺得這也是我的作品,我要放到作品集里,但這些零散的基礎(chǔ)的小練習(xí),并不能給你的作品明顯加分,反而會減分。對于這些練習(xí)的作品,如果技法難度不足,就不要放了。如果需要放也要考慮放在哪里,如何去用。比如一張插畫,單獨(dú)放在作品集里,會覺得非常的零散。如果做系列插畫,做為APP設(shè)計的啟動頁去展示,就會豐富飽滿許多。


應(yīng)屆生的作品

設(shè)計競爭非常激烈,很多大三大四的學(xué)生就有意識很早的開始學(xué)習(xí)了,為了尋求一份好的實(shí)習(xí)工作。首先弄明白為什么一些公司招收實(shí)習(xí)生,因?yàn)槟闶菨摿?。更看中的是你的設(shè)計潛力。所以你學(xué)校的作品?;蛘吣阃ㄟ^插畫字體設(shè)計,這些基本功判斷你是否具備相應(yīng)的潛力。但是現(xiàn)在有一個非常不好的現(xiàn)象,就是在作品集大量充斥著各種高深的產(chǎn)品分析和理論講述。這個現(xiàn)象集中在UI  設(shè)計中最普遍。


學(xué)生是沒有任何真實(shí)項目經(jīng)驗(yàn)的,有也是在項目中擔(dān)任輔助角色,所以各種用戶畫像,產(chǎn)品背景分析其實(shí)是非常懸浮在空中的,沒有真實(shí)參與過任何商業(yè)設(shè)計,或者一天生意也沒有做過,卻模仿社招工作多年的設(shè)計師,去講述各種理論數(shù)據(jù)分析。其實(shí)在面試官看來是非??尚Φ?。當(dāng)然純交互或者用戶體驗(yàn)的應(yīng)屆生。確實(shí)應(yīng)該多做這方面練習(xí)。但畢竟這樣的崗位稀少。而且不符合大量實(shí)習(xí)招聘職位的需求。


大廠作品集

現(xiàn)在互聯(lián)網(wǎng)的共享資源是如此豐富,也有很多樂于分享的設(shè)計師分享自己的作品集,我們能找到各種作品集的參考。我們都能看到各種吸睛的標(biāo)題,例如常見的標(biāo)題就是大廠的設(shè)計師如何做作品集的,每個設(shè)計師都有一個大廠夢,我們希望通過模仿大廠設(shè)計師的作品集,去入職大廠,這樣愿望是美好的,但現(xiàn)實(shí)很殘酷。全國有幾千萬設(shè)計師,大多數(shù)設(shè)計師所在的城市決定了,并沒有這樣的大廠存在。由于大廠的分工非常細(xì)致,每個設(shè)計師所分擔(dān)的職責(zé)非常垂直,做UI界面的基本上不會去做運(yùn)營設(shè)計相關(guān)。而做界面中,又會花大量時間研究項目所在的模塊的每個細(xì)節(jié)點(diǎn)。所以可以每個小細(xì)節(jié)點(diǎn)去做非常多的理論分析。


大廠作品集里面面最值得看的其實(shí)是項目經(jīng)驗(yàn)的總結(jié),這些偏理論分析的內(nèi)容,其實(shí)對于很多在二三線城市的設(shè)計師并沒有很直接的參考意義。試想下做為一個二三線的城市的老板,他招設(shè)計師的目的是什么,是不是去解決日常公司里美學(xué)問題,或者去做界面,或者去做專題,或者有時候公司日常有個易拉寶海報啥的也要你去幫忙做下,可能有的設(shè)計師覺得這不就是美工,多廉價。但是確實(shí)大多數(shù)公司設(shè)計師生存狀態(tài)就是如此。所以對于大多數(shù)設(shè)計師來說。你的作品集里如果充斥大量純虛擬UI的界面,不管你理論分析寫的多好,可能對于面試官來看,就是千篇一律,直接翻翻就PASS了。


清晰的結(jié)構(gòu)

作品集是你個人能力的體現(xiàn),也是你過完項目經(jīng)驗(yàn)的總結(jié)。不管是哪種。都需要細(xì)細(xì)的整理。而不是作品堆砌。常見的作品類型就是APP設(shè)計,專題設(shè)計,Banner設(shè)計,字體設(shè)計。我們常見的分類是方法是根據(jù)求職崗位進(jìn)行區(qū)分,比如偏UI設(shè)計的可以整理2到3個APP設(shè)計。如果求職方向是純視覺設(shè)計,那么需要整理專題設(shè)計,banner設(shè)計和一些字體品牌設(shè)計相關(guān)內(nèi)容。如果是在二三線城市。我建議作品集的內(nèi)容類型還是豐富一些,單一的類型的作品雖然聚焦,但是可能并不適合大多數(shù)人。


文件夾作品

五年前,如果你出去面試找工作,帶一堆文件夾出去,別人會覺得你這個設(shè)計師水平比較差,連總結(jié)都不做。所以我們必須做一份漂亮經(jīng)過整理的作品集。有一次有個學(xué)生問我UI面試有沒有什么技巧,我說技巧都是輔助,重要還是作品。我建議學(xué)生整理好作品集的同時,另外把作品以文件夾形式一個個項目整理好,因?yàn)檫@樣別人會通過查看你的作品明細(xì),可以對你的個人水平有更深入的認(rèn)識。


為什么會這樣了?因?yàn)槿ψ永镉幸恍┎缓玫默F(xiàn)象。就是有很多抄襲搬運(yùn)現(xiàn)象。甚至某寶上還有賣作品集的。這些現(xiàn)象尤其以插畫和APP作品為甚。十幾個拼湊的界面,五六頁的展示一個APP的項目。所以很多面試官對面試者水平產(chǎn)生各種懷疑。現(xiàn)在出去面試必然會做測試題。因?yàn)槊嬖嚬儆袝r候也無從判斷,只能通過這種最簡單粗暴但不友好的方式去看面試者水平。


設(shè)計思維的展示

作品集內(nèi)的內(nèi)容一定要想辦法走差異化路線。不管是UI類型的作品集,還是視覺類型的作品集,都不要千篇一律。比如一張插畫的展示,不要只放置一個作品圖片,,可以多展示一些設(shè)計思維,從頭腦風(fēng)暴的國潮,靈感的來源,價值的呈現(xiàn)多維度的去展示作品。


UI作品集的內(nèi)容

作品集內(nèi)放什么作品,這是設(shè)計師第一個需要明確的,我的下一份工作是做什么。如果是純UI界面崗位,作品集呈現(xiàn)以純Ui界面為主。并不需要加入太多純視覺設(shè)計的內(nèi)容。當(dāng)然這樣的的做法,面試機(jī)會非常少,有一定賭的成分。首先作品集里呈現(xiàn)的UI項目需要和你的工作經(jīng)歷匹配,這些項目的展示是你真實(shí)經(jīng)歷過的,如果你想靠純虛擬的項目在大廠去某得一份純UI工作,基本上的概率和中彩票差不多。


因?yàn)槭袌錾咸啻媪康拇髲S設(shè)計師也等著去跳槽,他們有著豐富的項目經(jīng)驗(yàn)和表達(dá)話術(shù),這點(diǎn)你是無法比擬的。純UI界面的作品集,如果有幸進(jìn)入面試環(huán)節(jié),在實(shí)際面試時候,對于項目的具體細(xì)節(jié),你并不能講的非常明白透徹,可能就沒有機(jī)會了。因?yàn)榇髲S設(shè)計師每天專注具體的項目具體的模塊,可以每個小細(xì)節(jié)講的很清楚,再加上出名的項目支撐,面試官也會高看一眼不是嘛?所以純UI界面的作品集在實(shí)際的找工作中,非常吃虧。大廠的面試官看不上,覺得你寫的那套理論非常的空洞模板化。中小廠覺得你作品缺乏綜合視覺能力,能力太單一。



運(yùn)營作品集的內(nèi)容

如果是純運(yùn)營視覺的作品集,以運(yùn)營專題設(shè)計為主,這類設(shè)計師可能也具備做UI的能力,那么很多運(yùn)營設(shè)計師最糾結(jié)的是,我要不要去放界面的內(nèi)容。那就根據(jù)你找工作的方向來定,如果你找純視覺運(yùn)營的方向,可以不放界面作品集,因?yàn)槟愕墓ぷ鲀?nèi)容并沒有這個,放上去顯得并不專業(yè),或者有點(diǎn)畫蛇添足。


也有人糾結(jié)我是不是應(yīng)該找一些各種數(shù)據(jù)理論來支撐一下,不要讓人覺得我是一個純畫圖的。我的建議是,如果去大廠,當(dāng)然要。你需要多在作品集里體現(xiàn)運(yùn)營的體系思維。比如各種運(yùn)營組件的整理,各種品牌營銷的視覺設(shè)定。這些才是大廠設(shè)計師具備的素質(zhì),如果你只是滿足作品集里加入各種漂亮的專題和Banner設(shè)計,你會發(fā)現(xiàn)你好像在找一個類似美工的工作。因?yàn)槟愕淖髌芳矬w現(xiàn)的只是一個執(zhí)行思維,并沒有營銷驅(qū)動的體系思維。


UI+視覺作品集的內(nèi)容

這個方向,其實(shí)我建議大多數(shù)人的方向,因?yàn)?0%以上的設(shè)計師,其實(shí)就業(yè)都在中小型公司,日常需要解決公司里各種美學(xué)問題,不管你是做UI,還是日常的運(yùn)營視覺,甚至一些線下的平面設(shè)計。所以公司需要的是你的作品集呈現(xiàn)你具有綜合視覺能力。我的建議是是各種類型作品都要放的,當(dāng)然這類作品集最大的問題是雜而不精,數(shù)量很多,單個作品沒有出彩的。所以如果你走這個綜合性路線。必須讓你的作品集看到出彩點(diǎn)。



下面我們來具體講講UI作品集應(yīng)該怎么做?



作品集的內(nèi)容

UI設(shè)計師的主要工作以界面為主,大型互聯(lián)網(wǎng)公司的UI設(shè)計師專注于界面設(shè)計,而中小型公司更加偏綜合,界面和視覺設(shè)計都要兼顧。到底在作品集里放多少APP?首先不是你放置APP數(shù)量越多越好,如果你的公司只專注一個APP,那么你可以就放一個,但是你需要通過大量篇幅去把這個APP的每個細(xì)節(jié)介紹清楚。不用五到六頁蜻蜓點(diǎn)水的介紹。這樣對你的作品集篩選沒有任何的幫助。



模板化的話術(shù)

曾經(jīng)UI界面設(shè)計很純粹就是考慮如何設(shè)計一個舒服的界面,讓用戶用的舒服,所以用戶體驗(yàn)為中心這個詞提出的頻率非常高,但現(xiàn)在發(fā)現(xiàn)好像沒人提這個詞了,設(shè)計并賦予了更多的職能。必須談商業(yè),必須談轉(zhuǎn)化率,有人說這是UI設(shè)計是商業(yè)設(shè)計一環(huán),所以必須更多的談商業(yè),所以你會發(fā)現(xiàn)現(xiàn)在周圍的UI設(shè)計更多的談設(shè)計賦能,用戶增長,營銷架構(gòu),商業(yè)戰(zhàn)略,宏觀視野這些詞匯。感覺設(shè)計師背負(fù)了這么重的使命,快成CEO了。


這些話術(shù)是不是很熟悉,你好像在每個作品集里都可以看到。你要是很純粹的談一些微觀的界面流程優(yōu)化,感覺你的格局太小了。大廠設(shè)計師特別喜歡引導(dǎo)這樣的潮流,因?yàn)槲覀儾⒉磺宄@里面很具體是怎么樣的。比如你會在每個作品集里都看到千篇一律的KANO模型話術(shù)。這是一個產(chǎn)品經(jīng)理應(yīng)該去考慮的事情,設(shè)計師應(yīng)該有產(chǎn)品思維也非常對的。但是當(dāng)一個作品集每個人都寫一樣的KANO模型和用戶體驗(yàn)地圖話術(shù)的時候,這個事情就不正常了。因?yàn)椴]有仔細(xì)深究,只是粘貼復(fù)制而已。


所以我們更多的是邯鄲學(xué)步,明明你是一個剛畢業(yè)的學(xué)生,也學(xué)著務(wù)虛的商業(yè)格局,這樣是非常不嚴(yán)肅的,所以目前大量的UI作品集里充斥著這些模板化的話術(shù),是非常耽誤人的。我的建議作品集里少去談這些非常宏觀空洞的話術(shù),作為普通設(shè)計師,多去關(guān)注一些UI設(shè)計交互體驗(yàn)細(xì)節(jié)。


數(shù)據(jù)分析

現(xiàn)在APP的界面講究數(shù)據(jù),你的APP下載量是多少,用戶多少,月活日活是多少。如果是改版的項目,通過你的改版取得了什么數(shù)據(jù)的增長。其實(shí)這些確實(shí)是商業(yè)設(shè)計關(guān)注的點(diǎn)。一些設(shè)計師如果如果不關(guān)注這些,去描述自己的項目的時候就容易底氣不足,如果是虛擬項目,那更是啞口無言。其實(shí)這些并不是衡量你UI設(shè)計的唯一標(biāo)準(zhǔn)。對于大廠設(shè)計師提供的各種數(shù)據(jù),也不要迷信。其實(shí)UI設(shè)計只是整個研發(fā)流程的一環(huán),一個改版的數(shù)據(jù),可能是多種因素促成的。有很多已知未知的數(shù)據(jù),設(shè)計師并不能完整的看到。所以了如果你是一個在職設(shè)計師,請多種渠道去關(guān)注你的設(shè)計數(shù)據(jù)。所以你是一個初學(xué)者或者只是參與某個模塊的設(shè)計,可以坦誠的面對。不要試圖編造一些無法驗(yàn)證的數(shù)據(jù)蒙混過關(guān)。


樣機(jī)使用

UI作品集里我是不建議使用任何樣機(jī)的。在五六年前如果用還是可以的,可以作為一個視覺展示的亮點(diǎn),現(xiàn)在作品集里還放這些,基本上作品集會被扔,因?yàn)閯e人覺得這是初學(xué)者。當(dāng)然還有一種情況,就是本身界面細(xì)節(jié)不足,想通過樣機(jī),把界面圖縮小,通過這樣取巧的辦法去蒙混過關(guān)。這樣在面試官那里也是很難通過的。我更建議UI界面用大圖展示,配以平實(shí)的排版,文字描述清楚你要講的點(diǎn)。UI的界面展示,能讓面試官看清楚你表達(dá)的內(nèi)容。而不是用眼花繚亂的視覺手段去掩飾界面思考的不足。比如下面的某設(shè)計師設(shè)計的排版,沒有任何花哨排版,就是樸實(shí)的展示界面細(xì)節(jié)。我覺得這樣看似沒有設(shè)計的排版其實(shí)是最佳的展現(xiàn)形式。


品牌設(shè)計

不同公司對于品牌設(shè)計的定義不一樣。比如一些大型公司品牌設(shè)計是平面設(shè)計范疇下的,負(fù)責(zé)各種線上線下的各種品牌視覺,具體的比如我要做一次活動,我需要輸出一整套設(shè)計方案,這個方案供各種印刷或者線上界面使用。這是一些大型互聯(lián)網(wǎng)公司品牌設(shè)計需要做的


那么對于很多普通中小型公司的UI設(shè)計師,顯然沒有這么高的品牌要求,不會單獨(dú)招聘一個品牌設(shè)計師,所以這部分工作你可能也要承擔(dān)起來。同時作品集中UI部分顯然也需要去考慮一些品牌視覺的輸出。比如繪制一些IP形象在界面中貫穿。

并對這些形象進(jìn)行視覺延伸,比如界面中的圖標(biāo),界面中的彈窗,界面中的缺省數(shù)據(jù)頁,都可以運(yùn)用IP形象進(jìn)行穿插。在IP形象冗余界面中,做的比較好的是閑魚APP




運(yùn)營設(shè)計

很多UI設(shè)計師有這樣一個鄙視鏈,沉迷于各種產(chǎn)品分析,覺得做運(yùn)營設(shè)計是非常廉價的,這樣的想法有歷史原因,當(dāng)然最直接的原因是運(yùn)營設(shè)計的薪資天花板比UI設(shè)計要低。在大廠里UI設(shè)計專注于界面設(shè)計的某個模塊,一個APP其實(shí)由一組人完成,每個人負(fù)責(zé)具體的模塊,所以研究的非常精細(xì)。但同時局限性其實(shí)也非常大。對于很多設(shè)計師來說。不要完全把自己的專業(yè)局限在純界面上,日常工作也會涉及到非常多的視覺運(yùn)營設(shè)計。比如一張漂亮的啟動頁,一個充滿營銷味道的彈窗,這些都應(yīng)該是設(shè)計師不可以丟下的基本功。

 


插畫設(shè)計

這幾年插畫設(shè)計非常的流行,很多UI設(shè)計師也覺得這是一個必備的技能去學(xué)習(xí),那么作品集放一些插畫作品會不會給你加分了?首先我們招聘設(shè)計師是來解決工作中的各種問題,那么一個做界面設(shè)計師需要的實(shí)際應(yīng)用能力。插畫也有非常多的風(fēng)格,常見的兒插風(fēng)格,厚重的手繪CG風(fēng)格,漫畫涂鴉風(fēng)格,扁平線性風(fēng)格等等,并不是所有的風(fēng)格都可以應(yīng)用在界面設(shè)計中的。如果你只是做為業(yè)余愛好來學(xué)習(xí)。你可以任意選擇風(fēng)格去學(xué)習(xí)。而作品集里放置一些零散的小插畫,除了讓面試官知道你會繪畫外,并不能有明顯的加分,反而這些小練習(xí)給人感覺非常零散,不專業(yè)的感覺。所以如果你想去學(xué)習(xí)插畫,請在界面中呈現(xiàn)插畫與設(shè)計結(jié)合的應(yīng)用。比如啟動頁,banner設(shè)計,專題的頭圖等等。


C4D設(shè)計

C4D也是一個熱門的方向,這個可以運(yùn)用在非常多的運(yùn)營設(shè)計中,但是首先明確C4D不是那么容易學(xué)好的,入門非常容易,但是想精深需要花太多太多時間精進(jìn)學(xué)習(xí)的。我看過非常的設(shè)計師作品集里放置了非常初級的燈管字之類的小練習(xí),這些都是學(xué)習(xí)了幾個月的成果,然后發(fā)現(xiàn)工作中用不到,然后也沒有再去深入去研究了。就半途而廢了。那么你會發(fā)現(xiàn)作品集里放這些小練習(xí),還不如不放,這樣會更加暴露你的專業(yè)不足的缺陷。下面是我一個設(shè)計師



今天就講到這里,我們將繼續(xù)更新下一篇《如何設(shè)計運(yùn)營作品集》, 

我已經(jīng)寫好了,讓我再精加工下,當(dāng)然也可以關(guān)注我的

設(shè)計公眾號《聊設(shè)計》liaosheji2010,第一時間觀看到我的更新。



轉(zhuǎn)自:站酷

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

2020·營銷員工具·大病互助

前端達(dá)人

2020新冠疫情大爆發(fā),生命在病毒面前不堪一擊;一份保險不是為了愉悅而是安心;今年為健康服務(wù)。




轉(zhuǎn)自:站酷

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

留學(xué)產(chǎn)品體驗(yàn)升級

前端達(dá)人

隔了一年都沒發(fā)作品了,感覺還是得多發(fā)發(fā)作品提升自己呀。本來是還有兩張動效的,文件太大導(dǎo)出有問題所以我放棄了,下次一定做好優(yōu)化。

轉(zhuǎn)自:站酷

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

我們怎樣理解暗黑模式

ui設(shè)計分享達(dá)人

/引言

“由理有劇”系列以”我們怎樣理解暗黑模式“為開篇,緣由作者正在任職的工作是 TO B 產(chǎn)品交互及界面設(shè)計,入職時正值公司整體產(chǎn)品線升級迭代,用戶界面從淺色模式向暗黑模式探索的階段。這個探索階段面臨的本質(zhì)問題便是“到底什么是暗黑模式”,同時“我們?yōu)槭裁匆冒岛谀J?/strong>”的問題也隨之而來。

為了給公司同事闡述這兩個問題,作者搜集了大量資料,翻閱了相關(guān)產(chǎn)品系統(tǒng)所給出的設(shè)計文檔,重點(diǎn)圍繞“什么是暗黑模式”展開,逐步推敲其中的理論原理,總結(jié)出便于理解的文字內(nèi)容。這樣做的目的簡單有二,一是與產(chǎn)品、開發(fā)、測試方面的同事能夠達(dá)成向暗黑模式優(yōu)化升級的共識;二是能夠讓我們的各個產(chǎn)品線更從容地去擁抱暗黑模式的到來。



/“由理有劇”系列篇01:我們怎樣理解暗黑模式


文章大綱

1、是什么?

2、為什么?


一、是什么?



隨著 iOS 13 和 Android 10 的正式發(fā)布,“暗黑模式 (Dark Mode)”一詞逐漸走入了我們的視野,“暗黑模式是什么?”這個問題也一度霸占了Google搜索榜首。想要深入了解暗黑模式,也許我們可以換一個角度,從用戶界面的演進(jìn)歷史中尋找線索,從而幫助我們更好地理解暗黑模式。


作者自從拜讀了《蘋果三劍客》,對于用戶界面的前世今生才有了更深的了解,蘋果的產(chǎn)品發(fā)展史,某種程度上也可以稱為用戶界面的演進(jìn)史。廢話不說,下面讓我們一起簡單聊聊。



1、原來,“Dark Mode”是用戶界面的起源


計算機(jī)誕生的早期,其顯示器一直以“暗黑模式”面向操作者,其緣由是早期的顯示技術(shù)一直被CRT主導(dǎo),CRT釋義為“陰極射線顯像管”,在19世紀(jì)末被研制出來,因?yàn)橹圃煸硐鄬唵?,所以CRT一直是早期電腦顯示的主力,但在上世紀(jì)80年代之前僅支持單色顯示。


下面兩圖分別為蘋果公司于1977至1980年間生產(chǎn)發(fā)售的 Apple II 及 Apple III 型計算機(jī)

圖中顯而易見,兩款計算機(jī)的顯示方式均為單調(diào)的黑底白字或綠字,呈現(xiàn)出一種“暗黑模式”的視覺效果。蘋果公司的 Apple II 和 Apple III 兩支產(chǎn)品線一直以這種“暗黑模式”面向用戶。這也反映了早期的計算機(jī)以輸入代碼執(zhí)行數(shù)字運(yùn)算作為主要功能,但是這從另一方面反應(yīng)出:未來計算機(jī)會借助不斷成長、成熟的電子技術(shù),必將掀起一場接一場的變革,用戶界面也隨之不斷地革新。



2、Apple Lisa(麗薩)奠定了計算機(jī)向“圖形用戶界面”演進(jìn)的基礎(chǔ)


上個世紀(jì)80年代之后,CRT彩色顯示技術(shù)成熟,逐漸流行普及到各個電子行業(yè),但當(dāng)時主流的計算機(jī)操作系統(tǒng)并沒有“圖形界面”這個概念,所以大部分計算機(jī)產(chǎn)品依舊延續(xù)了先前黑色背景的顯示方式。


直到1983年1月9日,在年度股東大會上,蘋果宣布了兩款將在未來的計算機(jī)行業(yè)中占據(jù)關(guān)鍵地位的產(chǎn)品:一款叫 Apple Lisa (麗薩,老喬的第一個女兒),蘋果第一臺(也是全球第一款)基于圖形用戶界面(GUI)的計算機(jī),也就是 Macintosh 的前身;另一臺叫 Apple IIe ,是已獲高度成功的 Apple II 系列的新一代進(jìn)階產(chǎn)品。

Apple Lisa 向主流個人電腦行業(yè)介紹了一種全新的鼠標(biāo)控制的圖形用戶界面,宣布向單調(diào)的黑白用戶界面告別。


運(yùn)用形象的圖標(biāo)、方便的下拉菜單和重疊的窗口,替代了此前一貫使用的輸入文字命令,Lisa的圖形用戶界面開啟了消費(fèi)者與個人電腦交互方式的革新之路。盡管Lisa存在諸多缺點(diǎn),如定價過高,功能缺失、運(yùn)行緩慢等,但它的圖形用戶界面依然給它贏得一陣喝彩。


Lisa的GUI影響如此深遠(yuǎn),以至于諸多電腦制造商紛紛加入鼠標(biāo)控制的GUI領(lǐng)域,爭相模仿。就在Lisa首次亮相十個月后,微軟于1983年11月推出了Windows操作環(huán)境。(對于此事,老喬總是公開譴責(zé)微軟的蓋茨抄襲他的產(chǎn)品創(chuàng)意,甚至想讓蓋茨吃官司,兩位大佬一直不合也是業(yè)界皆知,跑題了...)

///一個有意思的事兒:今年7月份,一位外國的蘋果粉在Twitter上發(fā)布了一條關(guān)于 Apple IIe 型計算機(jī)的動態(tài),內(nèi)容展示了自己使用 Apple IIe 型計算機(jī)進(jìn)行智能化任務(wù)的過程,如發(fā)送推文、在Evernote中寫作、發(fā)送電子郵件,甚至控制智能家居(如下圖)。要知道,這臺計算機(jī)生產(chǎn)發(fā)售至今已有37年的時間。由此感嘆,不得不說蘋果對于產(chǎn)品的品控做到了那個時代的。



3、Macintosh(麥金塔)推動了“暗黑模式”向“淺色模式”的邁進(jìn)


1984年,蘋果發(fā)布了個人計算機(jī) Macintosh(麥金塔),Macintosh 延續(xù)了 Lisa 的圖形界面語言,并向世界普及了圖形用戶界面(Graphic User Interface)的概念,從而開啟了以白色為底色的圖形交互時代。

Lisa獲得的一些成就在 Macintosh 上體現(xiàn)的淋漓盡致,包括靈活的鼠標(biāo)、點(diǎn)陣影像圖、桌面的布局、形象的圖標(biāo)、相稱的字體、屏幕上方的下拉菜單和重疊的窗口,這些也得益于日益成熟的顯示技術(shù)和不斷進(jìn)步的計算處理技術(shù)。形象生動的圖形設(shè)計和界面交互一直是老喬最引以為傲的杰作,不得不說,老喬對于計算機(jī)行業(yè)甚至是設(shè)計行業(yè)都有著極高的敏感度和先于旁人的前瞻性。(當(dāng)然,這里的主語應(yīng)該是蘋果)


Macintosh 產(chǎn)品的成功,不是蘋果一味地迎合計算機(jī)消費(fèi)市場,而是利用創(chuàng)新的方式引導(dǎo)市場,引領(lǐng)計算機(jī)行業(yè)向人性化的用戶界面發(fā)展、邁進(jìn)。


至此,我們也徹底地向“暗黑模式”說了再見,全面擁抱“淺色模式”的到來。



4、“淺色模式”成為用戶界面的主流


麥金塔搭載的 System 1 打破了字符終端的模式,淺色的界面風(fēng)格一直持續(xù)到 System 6 都沒有顯著的改變。直到1991 年的 System 7 開始引入彩色,圖標(biāo)也增加了隱約的灰色,藍(lán)色和黃色陰影。System 7 系列中的 7.6 版本正式被蘋果公司改名為 Mac OS ,而這一年是1997年。

與此同時,微軟的 Windows 從黑屏的 DOS 發(fā)展到全屏幕的 Windows 1,再到較為成熟的 Windows 3,最后演變到奠定當(dāng)今 Windows 界面基礎(chǔ)的炫麗多彩的 Windows 95。用那個時代的眼光來看,微軟的變化是相當(dāng)驚人的,微軟儼然成為了一匹計算機(jī)行業(yè)的黑馬,一路趕超蘋果成為行業(yè)霸主,而蘋果因?yàn)橐蜓嘏f,在界面設(shè)計上從領(lǐng)先掉到了最后。

此后,從 Mac OS 8 到 Mac OS X Server 1.0 ,蘋果一直專注于改善操作系統(tǒng)和優(yōu)化界面表現(xiàn),直到2001 年 3 月,經(jīng)歷了四個開發(fā)者預(yù)覽版和一個公共測試版之后的 Aqua 界面終于跟隨 10.0 正式發(fā)布,發(fā)布后改變了人們對計算機(jī)界面的印象,在隨后的10年里蘋果一直沿用這套界面風(fēng)格。

OS X 系列用戶界面較大的更新來自于2007年10月發(fā)布的 10.5 Leopard 豹,雖然基本的界面仍為 Aqua 和其糖果滾動條,但新加入了一些鉑灰色和藍(lán)色,另外重新設(shè)計的 3D Dock和更多的動畫交互使得新界面看上去 3D效果更強(qiáng),此外還改進(jìn)了 Finder、半透明菜單條并新增了最初只用于 iTunes 的 Cover Flow界面。


整體來說,Mac OS X 10.5 Leopard 豹 這一版本的用戶界面相比之前有了翻天覆地的變化,靈活生動的圖形語言和交互體驗(yàn)重新得到了用戶青睞,蘋果也以此,再一次走上了引領(lǐng)潮流之路,使得多彩的“淺色模式”成為用戶交互界面的主流。

蘋果開創(chuàng)性的界面圖形語言也延續(xù)到了移動設(shè)備領(lǐng)域。

2007年的初代iPhone作為蘋果公司第一個移動設(shè)備產(chǎn)品(iPhone1代)首次亮相市場,驚艷了整個行業(yè),iPhone搭載的 iPhone OS 和后來更名為 iOS 的系統(tǒng),延續(xù)了 Mac OS 用戶界面的設(shè)計語言。在歷代iPhone上可以看到?jīng)]有物理鍵盤侵占空間的屏幕,精美的的方塊圖案整齊的排列開來,顏色豐富且耐看。

依稀記得當(dāng)時的我們,還玩著黑白屏幕上的俄羅斯方塊,還敲打著物理鍵盤上的九宮格,挪雞鴨也表示永不為奴。

2010年堪稱iPhone史上最重要的一年,蘋果推出了“改變一切”的iPhone 4,并對其用戶界面進(jìn)行了革新。

生動的擬物化設(shè)計風(fēng)格正式成為業(yè)界潮流,這也使得UI行業(yè)逐漸熱了起來,蘋果的界面設(shè)計規(guī)范也順勢成為了主流的移動端設(shè)計規(guī)范。

蘋果以此作為移動端界面設(shè)計的基礎(chǔ),沿用到之后的iPhone系列中,期間iOS系統(tǒng)的風(fēng)格保持依舊,只有 iPhone 5S 搭載的 iOS 7 做出了圖標(biāo)由擬物化向扁平化的改變,但整體都以“淺色模式”作為主流的用戶界面視覺模式。



5、“暗黑模式”的正式登場


在 Mac OS 的系統(tǒng)上,用戶可以通過“通用設(shè)置-外觀”來對整體界面進(jìn)行淺色、深色的切換,可以看出,蘋果早已把“暗黑模式”納入到他們的開發(fā)隊列中,也就是說,“暗黑模式”的概念主要來源于蘋果的 Mac OS,這也為“暗黑模式”的正式登場埋下了伏筆。

自從有了這個概念之后,很多網(wǎng)站都為用戶提供了“淺色”和“深色”兩套界面,便于用戶根據(jù)自己的習(xí)慣或愛好進(jìn)行切換。在 Mac OS 之后,很多 App 和 Android 定制 ROM 也加入了所謂“深色模式”的支持,其中也不乏 Web 端的網(wǎng)站、系統(tǒng)等。

北京時間2019年6月4日,果粉期待已久的蘋果WWDC19如期而至。

發(fā)布會上,庫克一如既往地優(yōu)先調(diào)侃了Andriod系統(tǒng)一番….(蘋果一直喜歡用數(shù)據(jù)說話,想了解的同學(xué)可以回顧一下發(fā)布會的視頻)

言歸正傳,在發(fā)布了一系列硬件之后,庫克終于介紹了大家期待已久的 iOS 13。新發(fā)布的 iOS 13,除了提升系統(tǒng)流暢度和增加系統(tǒng)穩(wěn)定性外,還介紹了其他提升用戶體驗(yàn)的優(yōu)化。


其中,最為引人注目的“暗黑模式”即將亮相于新系統(tǒng)。

發(fā)布會表示,暗黑模式可以“改善電池壽命,改善視力不佳和強(qiáng)光下的人的可視性,以及在弱光環(huán)境中更好地使用設(shè)備”。

“Wow,beautiful!”、“That’s beautiful!”、“That’s so beautiful!”發(fā)布會的主持人一邊演示使用在暗黑模式下的App應(yīng)用,一邊不由自主地發(fā)出贊美。這也許也受到了老喬的影響,猶如在劇場舞臺中心的話劇演員,有著一種無可比擬的自信和氣場。

但有意思的一點(diǎn)是,主持人展示了 iOS 13 暗黑模式的開發(fā)團(tuán)隊合照,從極客穿著到賽博朋克式的暗黑搖滾裝扮,這一戲劇性的變化似乎在告訴大家:“玩,我們也是認(rèn)真的?!?

發(fā)布會上簡單演示了暗黑模式下的漂亮界面,雖然沒有過多地闡述暗黑模式的開發(fā)細(xì)節(jié),但是這標(biāo)志著暗黑模式“重新”登上歷史舞臺。



6、小結(jié)


我們從蘋果產(chǎn)品發(fā)展史中,不難發(fā)現(xiàn)蘋果對于用戶體驗(yàn)的理解是具有創(chuàng)造性的,總是能先于用戶發(fā)現(xiàn)用戶的潛在需求。蘋果產(chǎn)品的發(fā)展史也可以稱之為用戶界面的演進(jìn)史,從早期黑色背景的計算機(jī)桌面發(fā)展到以淺色為主的用戶界面,再到 iOS 13 正式發(fā)布的“暗黑模式”,這一過程貌似是在“返祖”,但這些始終是圍繞以用戶體驗(yàn)為中心的改變和突破。


“暗黑模式”是什么?拋開技術(shù)理論,簡單理解就是降低用戶界面在設(shè)備上的亮度,以深色的背景、較低的對比度、灰階的色彩來呈現(xiàn)用戶界面,提升用戶使用產(chǎn)品的體驗(yàn)。



二、為什么?


上面我們提到了,根據(jù) Apple 官方的說法,暗黑模式可以“改善電池壽命,改善視力不佳和強(qiáng)光下的人的可視性,以及在弱光環(huán)境中更好地使用設(shè)備”。

我們可以圍繞這個說法,結(jié)合我們與設(shè)備、環(huán)境的關(guān)系進(jìn)行探討。



1、更好地適應(yīng)弱光環(huán)境


隨著人們對智能設(shè)備的依賴性越來越強(qiáng),設(shè)備使用的時間也高頻覆蓋了白天到黑夜,夜晚使用的頻率更是與日俱增,所以暗光環(huán)境的使用需求被實(shí)實(shí)在在地擺到了臺面上。以設(shè)計職業(yè)為例,在阿里巴巴 UCAN 2019 設(shè)計大會上分享的數(shù)據(jù)結(jié)果顯示:設(shè)計師群體夜晚的工作時間通常在5-6個小時…

不是在加班就是在加班路上的我們更習(xí)慣于在夜間工作,夜間安靜的環(huán)境更能讓我們專注設(shè)計、靈感爆棚。但這也在另一方面表達(dá)了我們需要設(shè)備更加符合我們在弱光環(huán)境下的視聽需求。

Dark Mode 由此應(yīng)運(yùn)而生,使用暗色模式可以縮小屏幕顯示內(nèi)容與環(huán)境光強(qiáng)度的差距,可以保證使用者在暗光環(huán)境下使用設(shè)備的舒適度。也就是說 Dark Mode 可以降低屏幕的整體視覺亮度,降低對眼睛的視覺壓力,再也不用怕夜晚的設(shè)備屏幕刺瞎我們的雙眼了。


但這里我們要理解一個概念,“降低對眼睛的視覺壓力”并不等同于所謂的“護(hù)眼”,夜晚使用暗黑模式的設(shè)備,實(shí)際上并沒有改變屏幕的“頻閃”問題,所以說用戶看屏幕的時候依舊會有視覺疲勞的癥狀,所以各位大佬還是晚上少看屏幕,多愛護(hù)眼睛吧。



2、更好地專注顯示內(nèi)容



想象一下,我們在電影院看電影時,為什么要全場關(guān)燈?

甚至有些APP, 在影片的下方也會有一個模擬關(guān)燈效果的按鈕,來讓整個手機(jī)屏幕變黑, 只剩下視頻畫面的部分,這都幫助我們可以更專注、更沉浸在當(dāng)前的內(nèi)容下,也就是所謂的“沉浸感”。


這其中的原理就是色彩本身是具有層級關(guān)系的,深色會在視覺感官上自動后退,淺色部分則會向前延展,這樣對比強(qiáng)烈的層次關(guān)系可以讓用戶更注重被凸顯出來的內(nèi)容和交互操作;尤其在信息負(fù)責(zé)界面內(nèi)層級關(guān)系的合理拉開對操作效率都有明顯的促進(jìn)作用。

這一點(diǎn)在股票交易軟件上就是最好的驗(yàn)證,目前來看全世界絕大多數(shù)的股票軟件采用的都是負(fù)極性,也就是暗色底的設(shè)計方式。紅色和綠色代表的漲或跌(不同國家顏色表示可能不一樣)在這樣的深色背景下就會特別顯眼,還有一些顏色比如藍(lán)色用于某些數(shù)據(jù)的走勢圖。這樣的顯示幫助用戶更好地集中精力在數(shù)據(jù)獲取上,更快地做出決策。


3、更好地迎合消費(fèi)品味


這里所提到的消費(fèi)品味是來自用戶層面的潛在心理需求。

從心理學(xué)角度而言,顏色可以影響觀者的感受和情緒,這直接影響到用戶對于一個事物的判斷和選擇,這就像我們消費(fèi)購物一般,有時候我們的消費(fèi)不完全是為功能、實(shí)用性買單,而更加看重的是一個產(chǎn)品的外觀屬性,當(dāng)產(chǎn)品的外觀符合我們的消費(fèi)審美甚至超越預(yù)期時,我們往往會更快地做出消費(fèi)選擇。


而黑色在積極層面的外在直觀表現(xiàn)為高貴、莊嚴(yán)、鎮(zhèn)定、神秘,這代表著黑色相比其他顏色存在著更多的可能性,這也造就了黑色成為百搭色,可以作為其他顏色的底色、陪襯色進(jìn)行使用。暗黑模式也存在同樣的心理暗示,沉穩(wěn)、神秘的黑色會讓用戶聯(lián)想到產(chǎn)品的穩(wěn)定和高級,提升用戶的心理信任度,迎合用戶的消費(fèi)品味。

4、更好地改善電池壽命


最后才探討耗電功效方面的問題,算是一個壓軸問題了,在某種程度上說,智能移動設(shè)備目前最大的矛盾是性能與電池功效的博弈。如果去微博等社交網(wǎng)站進(jìn)行搜索可以發(fā)現(xiàn),為了省電而使用深色主題或者說黑暗模式的用戶大有人在,尤其是一些中高端采用 OLED 屏幕的手機(jī)。這是為什么?


暗黑模式省電的作用來源于 OLED 這種材質(zhì)的特性,這種屏幕經(jīng)過多年發(fā)展如今已經(jīng)取代了 LCD 在中高端手機(jī)上的地位。和 LCD 依賴于背光不同,OLED 自發(fā)光的特性使得屏幕能夠獨(dú)立控制單個像素是否發(fā)光,也就是說畫面越黑,采用 OLED 屏幕的手機(jī)就越省電。下圖做了一個簡單的理解示例,每一列的格子代表亮度,在不同亮度下有相對應(yīng)的耗電量顯示,閃電的亮度代表耗電量的多少。

理解了簡單含義,我們再來看一下Notebookcheck上對于OLED功耗的專業(yè)研究數(shù)據(jù)。在使用 OLED 屏幕時,屏幕上顯示的內(nèi)容決定了功耗。當(dāng)屏幕基本全黑時(OLED <1% White),OLED 屏在任何亮度下的功耗都保持恒定。顯示了白色內(nèi)容的屏幕,功耗曲線會隨著亮度提高而逐漸變陡。

上面的可視化圖表相對來說可能需要一定的理解時間,讓我們翻譯簡化一下。

上圖顯而易見,OLED屏幕的耗電量不僅受到亮度高低的影響,關(guān)鍵在于在OLED屏幕顯示了什么,有多少區(qū)域是淺色甚至是白色的,有多少區(qū)域是深色甚至黑色的,深色區(qū)域占比越高,相比較之下OLED屏幕也就越省電。這也就證明:OLED屏幕在使用以深色為主的顯示模式時,能夠降低耗電量,提升供電效率,也就是改善電池壽命。


///題外話:關(guān)于為什么我們的智能設(shè)備普遍采用OLED屏幕,可以參考Notebookcheck(文本鏈接),小伙伴們可以自行研究。


文章來源:站酷   作者:強(qiáng)強(qiáng)0075

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



8條復(fù)雜應(yīng)用程序的設(shè)計準(zhǔn)則

ui設(shè)計分享達(dá)人

前言 什么是復(fù)雜應(yīng)用程序?


之前,我們已經(jīng)將「復(fù)雜應(yīng)用程序」定義:為支持廣泛的、非結(jié)構(gòu)化的目標(biāo)或?qū)I(yè)領(lǐng)域用戶的非線性工作流的任何應(yīng)用程序。復(fù)雜應(yīng)用程序在其支持的工作流程和最終用戶的類型上當(dāng)然有所不同(比如從科學(xué)家到軍事專業(yè)人員再到金融分析師),但是復(fù)雜的應(yīng)用程序通常具有相似的品質(zhì)。


例如,復(fù)雜的應(yīng)用程序經(jīng)常出現(xiàn):

(1)以專業(yè)知識為專業(yè)用戶提供支持;

(2)幫助用戶瀏覽和管理大型基礎(chǔ)數(shù)據(jù),并啟用高級感官分析或數(shù)據(jù)分析;

(3)通過未知或可變的基礎(chǔ)任務(wù)支持問題的解決或達(dá)成最終目標(biāo);

(4)需要在多個角色,工具或平臺之間進(jìn)行切換或協(xié)作;

(5)減輕執(zhí)行中高影響力(或高價值)任務(wù)的風(fēng)險,因?yàn)樵诟唢L(fēng)險情況下,高額損失(例如收入甚至生命)會受到威脅。


盡管差異很大,但所有復(fù)雜的應(yīng)用程序都面臨許多相同的挑戰(zhàn),無論是創(chuàng)建這些復(fù)雜應(yīng)用程序的從業(yè)人員,還是依賴于它們進(jìn)行工作的最終用戶。


考慮到設(shè)計人員和研究人員在處理這些應(yīng)用程序時面臨的共同挑戰(zhàn),本文概述了8條復(fù)雜應(yīng)用程序設(shè)計準(zhǔn)則:




01 邊做邊學(xué)


研究表明,當(dāng)引入一個應(yīng)用程序或系統(tǒng)后,用戶更喜歡立即開始使用它,而不受其復(fù)雜程度的限制。相較于花費(fèi)大量時間學(xué)習(xí)使用教程、文檔或其他類型的幫助或設(shè)置內(nèi)容,用戶更有動力開始他們的任務(wù)。(這種現(xiàn)象被稱為活躍用戶的悖論。)雖然在任務(wù)或安全關(guān)鍵領(lǐng)域中僅依靠試錯學(xué)習(xí)來進(jìn)行應(yīng)用是危險且不適當(dāng)?shù)?,但一定程度的邊做邊學(xué)永遠(yuǎn)是必需的,因?yàn)樵谂嘤?xùn)課程或手冊中不可能涵蓋一個系統(tǒng)的所有使用。


支持用戶立即開始探索界面這一偏好,允許他們通過嘗試和錯誤來學(xué)習(xí)界面,而不會導(dǎo)致工作損失或不可彌補(bǔ)的損害。


例如,限制了用戶執(zhí)行長時間操作的能力,而看不到這些操作的結(jié)果。實(shí)時儀表板建構(gòu)支持這一原理,其中儀表板元素預(yù)覽在建構(gòu)時會實(shí)時更新。用戶不必等到任務(wù)結(jié)束就可以查看其操作結(jié)果是否符合其意圖。





02 幫助用戶采用更有效的方法


在大多數(shù)情況下,即使是復(fù)雜應(yīng)用程序的用戶也往往會處于中等水平。換句話說,大多數(shù)用戶在自己的設(shè)備上使用系統(tǒng)時,并沒有過渡到真正的專家使用水平。許多用戶會感到滿足,這意味著他們將繼續(xù)使用滿意的(通常是低效的)方式來完成任務(wù),而不是花費(fèi)時間為他們的工作流程尋找最佳解決方案。隨著時間的推移,這種行為將導(dǎo)致難以置信的生產(chǎn)力斷層,因?yàn)橛脩魧⒒ㄙM(fèi)數(shù)年甚至數(shù)十年的時間,以低效的方式日復(fù)一日地使用同一個系統(tǒng)。


通過為用戶的工作尋找通俗易懂的溝通方式和更有效的方法,幫助他們轉(zhuǎn)變?yōu)槭褂酶行У姆椒ú⒋蚱破涓畹俟痰男袨槟J健?


例如,與其僅僅依靠冗長的教程或手冊(甚至是寫得很好的),還不如在整個應(yīng)用程序中嵌入加速器或附加功能的上下文學(xué)習(xí)線索。上下文學(xué)習(xí)提示是僅在當(dāng)前任務(wù)的上下文中提供給用戶的提示。當(dāng)用戶將鼠標(biāo)懸停在工具欄菜單項上時,提示一種更快完成任務(wù)的方法的工具提示支持這一原則。




03 提供靈活而流暢的路徑


復(fù)雜應(yīng)用程序的用戶通常在非線性工作流中執(zhí)行廣泛的非結(jié)構(gòu)化目標(biāo)。對于這些工作流程,用戶可能不知道他們的確切最終目標(biāo),而是需要分析數(shù)據(jù)以尋找答案。即使存在一個制定良好的最終目標(biāo),用戶通常也不會遵循一組已知的、順序的子任務(wù)來實(shí)現(xiàn)它。但是,出于必要,該系統(tǒng)必須具有某種結(jié)構(gòu):與用戶交互的物理界面以及隨著時間推移完成的某種線性過程。


死板、線性的工作流強(qiáng)迫用戶從開始到結(jié)束完成一組操作,沒有退路或順序上的靈活性。通過避免這種死板的工作流,允許用戶在任務(wù)序列中具有靈活性。


例如,提供方法允許跳過前面的步驟,回溯前面的步驟,以及從任何步驟流暢地移動到任何其他步驟。再比如,面包屑中靈活的交互式序列圖使用戶可以返回之前的步驟,而不會丟失進(jìn)度。


04 幫助用戶跟蹤行為和思考過程


復(fù)雜應(yīng)用程序用戶經(jīng)常面臨漫長的等待,工作也經(jīng)常被打斷。例如,復(fù)雜的數(shù)據(jù)分析可能需要花費(fèi)數(shù)小時甚至數(shù)天的時間,而大多數(shù)復(fù)雜應(yīng)用程序用戶所面臨的高復(fù)雜性的環(huán)境可能會導(dǎo)致其工作意外中斷。即使沒有計劃外的中斷,為實(shí)現(xiàn)目標(biāo)而執(zhí)行的子任務(wù)的復(fù)雜性和可變性也要求用戶在任務(wù)執(zhí)行過程中將大量信息保存在工作存儲器中,而這些信息很容易在他們改變方向時丟失。


通過允許用戶在工作期間記錄他們的行動和思維過程,減輕工作記憶負(fù)擔(dān),并幫助用戶在工作流中斷或中斷后恢復(fù)任務(wù)。


允許用戶添加和存儲有關(guān)特定數(shù)據(jù)、圖表或其他元素的開放式注釋是支持此原理的一種方法。例如,在復(fù)雜的數(shù)據(jù)建?;蚍治銎陂g,用戶輸入的注釋可以在稍后時刻提醒用戶創(chuàng)建模型的原因,以及他們創(chuàng)建模型時試圖回答的問題。


05 協(xié)調(diào)多個工具和工作空間之間的轉(zhuǎn)換


復(fù)雜應(yīng)用程序用戶通??缍鄠€工具和多個工作區(qū)工作。即使用戶大部分工作主要依賴于一個專用應(yīng)用程序,他們?nèi)詴鲇诙喾N原因而頻繁切換應(yīng)用程序。例如,當(dāng)主要軟件不支持該操作時,可以從在線數(shù)據(jù)庫中收集數(shù)據(jù),查找和參考文章或其他外部文檔,或者在其他應(yīng)用程序中做自己的注釋和評論。即使是在主應(yīng)用程序中,存在軟件附加組件或其他啟用應(yīng)用程序中各種專門功能的可選軟件包,用戶也可能在不同的環(huán)境或工作空間之間轉(zhuǎn)換。


通過支持從一個環(huán)境轉(zhuǎn)換到另一個環(huán)境(包括主應(yīng)用程序內(nèi)部和外部),減少工具切換的負(fù)擔(dān)。


減少工具切換負(fù)擔(dān)的一種方法是簡單地接受這個生態(tài)系統(tǒng),并在主要應(yīng)用程序和經(jīng)常使用的第三方工具之間設(shè)計連接點(diǎn)。例如,復(fù)雜的工作通常需要協(xié)作和報告。將數(shù)據(jù)集導(dǎo)出到Excel或?qū)D像導(dǎo)出到PowerPoint的內(nèi)置功能,使用戶在試圖編譯報告和演示文稿時節(jié)省寶貴的時間,否則將花費(fèi)在轉(zhuǎn)換數(shù)據(jù)或屏幕快照圖像上。


06 減少混亂而不降低能力


復(fù)雜的應(yīng)用程序通常旨在適應(yīng)廣泛的用途。例如,環(huán)境機(jī)構(gòu)用來測量和跟蹤蜜蜂生產(chǎn)的分析監(jiān)測軟件也可能被汽車公司用來監(jiān)測機(jī)器故障。使用場景的多樣性一方面使復(fù)雜的應(yīng)用程序非常強(qiáng)大,但另一方面又常常非常混亂。此外,復(fù)雜的應(yīng)用程序通常必須同時支持新手和專家用戶,并且專家用戶可能需要新手用戶很少訪問的高級功能。


通過在不降低應(yīng)用程序功能的情況下,地減少界面內(nèi)混亂的外觀,幫助用戶管理在復(fù)雜應(yīng)用程序中普遍存在的選擇、特性和功能過載問題。


分階段公開是一種減少混亂的方法,僅在選項與手頭任務(wù)或重點(diǎn)項目相關(guān)時才向用戶顯示選項。例如,只有在復(fù)雜表單或向?qū)е羞x中相關(guān)字段后才顯示高級參數(shù)或設(shè)置,這就是與復(fù)雜應(yīng)用程序相關(guān)的分階段公開的一個例子。


07 簡化主要和次要信息的轉(zhuǎn)換


即使在界面中有效地減少了混亂,也不是所有的元素和信息都能(或應(yīng)該)一次顯示出來。有些信息必須放到二級層次;然而,次要信息通常是必要的,以作為有關(guān)主要層次的信息的決定的上下文參考。


通過允許用戶在不離開主屏幕或環(huán)境的情況下訪問和查看補(bǔ)充信息,簡化主信息和輔助信息之間的轉(zhuǎn)換,并幫助用戶將主信息置于上下文中。


儀表板通常支持此原理,例如,當(dāng)用戶將鼠標(biāo)懸停在圖表或圖形中的特定點(diǎn)上時,它允許用戶在工具提示中查看更的定量數(shù)據(jù)。



08 視覺上突出重要信息


復(fù)雜應(yīng)用程序用戶執(zhí)行的許多任務(wù)需要高度的視覺搜索。舉幾個例子:用戶可能需要在巨大表格中的表格視圖中查找和區(qū)分相關(guān)數(shù)據(jù)。系統(tǒng)警報必須引起用戶對界面相關(guān)部分的注意,以便用戶可以及時注意到并糾正潛在情況。在儀表板上簡單地查看和理解數(shù)據(jù)可視化也有一個重要的可視化搜索組件。在復(fù)雜的應(yīng)用程序中,大量競爭信息和元素可能會阻礙這些任務(wù)。


通過在視覺上突出關(guān)鍵元素(例如,讓它們從周圍元素中脫穎而出),幫助用戶找到重要信息并對其采取行動。值得注意的是,突出重要信息并不總是意味著要強(qiáng)調(diào)這些信息(例如,明亮的顏色或加重字體粗細(xì))。去掉不必要的元素可以同樣、甚至更有效地使重要信息在視覺上顯得突出。


例如,刪除無用的多余圖形或視覺元素可以讓留下的數(shù)據(jù)脫穎而出。儀表板模塊從數(shù)據(jù)元素中消除了不明顯的、難以理解的插圖,從而減輕試圖在儀表板上定位數(shù)據(jù)的用戶的視覺搜索負(fù)擔(dān),支持這一原則。



結(jié)論


復(fù)雜的應(yīng)用程序是多種多樣的,支持各種用戶類型和工作流;然而,類似的挑戰(zhàn)存在于各種領(lǐng)域的復(fù)雜應(yīng)用程序中。遵循這8條設(shè)計準(zhǔn)則優(yōu)化復(fù)雜的應(yīng)用程序:


1. 邊做邊學(xué)

2. 幫助用戶采用更有效的方法來完成任務(wù)

3. 提供靈活而流暢的途徑

4. 幫助用戶跟蹤動作和思考過程

5. 協(xié)調(diào)多個工具和工作空間之間的轉(zhuǎn)換

6. 減少混亂而不降低能力

7. 簡化主要和次要信息之間的轉(zhuǎn)換

8. 視覺上突出重要信息


文章來源:站酷   作者:拾柒醬

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


被慣性思維牢籠禁錮的產(chǎn)品色彩“方法”

ui設(shè)計分享達(dá)人


不知道大家有沒有聽過這么一個故事:某家餐廳銷量一直不太好,老板究其原因也沒有查明白到底是為啥,明明選址在鬧市區(qū),價格也很實(shí)惠,就是賣不出去;后來老板請了個“大師”幫忙一探究竟,大師說你家盤子顏色不行,換成橙色保準(zhǔn)牛X;老板立馬認(rèn)購了一批橙色盤子,從那以后以后這家餐廳火爆了,王境澤都覺著香的不行…

聽完這個故事,自此我幼小的心靈里把橙色和食欲劃了等號。這個烙印直到我從業(yè)前幾年還一直這么覺著。同時間段,在9年義務(wù)教育的美術(shù)課本上,我得到了有生以來第一次對色彩這門學(xué)問的細(xì)致輸入,了解到了各種顏色對應(yīng)的含義與情緒:

這種色彩與情緒的映射關(guān)系在我的腦袋里根深蒂固 / 無法磨滅,直到有那么一場面試或者匯報,面試官/老板問我,“為什么你要選擇這個顏色作為品牌色呢?”

面對著一手塑造出來的社交應(yīng)用,我解釋到:“因?yàn)榧t色代表著熱鬧,這個顏色會賦予這款產(chǎn)品熱鬧的氛圍”。坦誠的講,這個解釋自信但空洞,顏色本身并無好壞和指向,只看你用在了什么地方,不講究場景就別輕易定性。

這也側(cè)面反映出來慣性思維的不斷吞噬著你我的思路,過往的“經(jīng)驗(yàn)”可以讓人習(xí)以為常,也可以讓人尷尬不已,取決于是否洞察的到。如果拋棄慣性思維,到底如何去定義一款產(chǎn)品的主色呢?


STEP 1

說實(shí)話選取一個顏色作為品牌色是一個戰(zhàn)略決策過程,一般來說行業(yè)里一定存在一種主流顏色,像旅游行業(yè)的攜程/去哪兒和途牛,還有以淘寶為代表的電商行業(yè)通常是喜慶的大紅大橙。

顯而易見基于這個邏輯下,有3個做法,一條路是順勢而為,一條是逆向而去,還有一條是另辟蹊徑。這塊的選擇一定程度上并不是設(shè)計師可以決定的,需要結(jié)合整個業(yè)務(wù)的方向去判斷;在旅游行業(yè)里馬蜂窩選擇了逆向而去,在直播行業(yè)里抖音就選擇了另辟蹊徑。

我們試著揣測下抖音和馬蜂窩的想法,在產(chǎn)品的定位和策略的打法上,他們更注重的是差異化,走反方向的路突出品牌,試圖在用戶的心里站得住。通過這個例子你或許會發(fā)現(xiàn),黑色未必死氣沉沉,ta也可以色彩斑斕;黃色未必只象征尊貴,ta也可以代表青春和希望;顏色沒有偏向,只看使用在什么場景上。

主色的選擇更需要貼合業(yè)務(wù)戰(zhàn)略的發(fā)展,也更多的偏向于主觀。給業(yè)務(wù)提供思路和方向,判斷不好業(yè)務(wù)方向的時候,多提供思路幫助其更好的匹配顏色。


STEP 2

以往的面試?yán)?,我這種好事的面試官就特別喜歡問侯選人一個問題:“一個色相里有那么多色號,為什么你定了這個色號作為品牌色?”大部分候選人乍一聽都是面露難色,心里大概想著這人是個傻X吧,能問這種問題,哈哈哈哈哈哈;廢話不多說,我來簡單分享下我的方法:

首先以黑白兩色(#000000-#FFFFFF)作為起始點(diǎn)設(shè)置10個梯度,然后把第一個模塊定義的色相扔進(jìn)去,只需要調(diào)整HSB中的H就可以,這樣一頓操作下來你就得到了一個完整的色彩序列:

第二步,基于序列主觀調(diào)整下顏色,確定主色的同時確保其在黑白2種背景上對比度大于4.5:1(wcag色彩可用性標(biāo)準(zhǔn)),理論上來講梯度中間是最合適的,飽和和亮度足夠就可以。

上圖是我用到的色彩可用性測試工具-color review(https://color.review/)


STEP 3

當(dāng)你準(zhǔn)備好了以上所有工作,最后一步就是拓展色系了;這里采用負(fù)能量補(bǔ)給站小商店的品牌色“叛逆橙” #FF774A(H15 S71 B100) 作為主色并結(jié)合下google的方法開始拓展色系。

首先 - 確認(rèn)同色系輔助色:我們將主色的色相加減 30° (谷歌是以10為梯度,但色相變化不大,為了效果我們以3倍作為最小單位)獲得2個新顏色,即同色系輔助色。

其次 - 確認(rèn)對比色輔助色,將主色的色相加上 180° 獲得其互補(bǔ)色,即對比色系輔助色。為了和主色的類似色對應(yīng),取互補(bǔ)色的同類色(色相加減 15°)和類似色(色相加減 30°)。從中選取需要的顏色作為最終的對比色系輔助色。

根據(jù)色彩需求取同類色2和類似色1作為最終的對比色系輔助色,這樣,我們得到了主色和四個輔助色;同理你可以推理出無色彩傾向的中性色系(這里就不展開贅述)。

最后你可以通過編碼的方式,賦予每個顏色一個token(密鑰),方便團(tuán)隊的配合和使用。

以上就是我在選取色彩的大概思路,市面上也有很多講顏色的好文,分享大家去找找。


總結(jié)一下

隨著工作經(jīng)驗(yàn)/時長的不多增加,我們往往會對事物的存在習(xí)以為常,思維的慣性會困住我們追根溯源的想法,但需求和場景是千變?nèi)f化的,所有的方法也都針對的是通用場景,標(biāo)準(zhǔn)化的解決方案未必適用你當(dāng)下的處境;試著在熟悉的環(huán)境用敏銳的洞察和科學(xué)的方法突圍也許是最好的辦法。

文章來源:UI中國   作者:負(fù)能量補(bǔ)給站 

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

一篇文章搞懂毛玻璃擬態(tài)

資深UI設(shè)計者


設(shè)計趨勢輪回,玻璃效果以一種新的展現(xiàn)形式回歸,我們以往對它的稱呼有毛玻璃效果、磨砂效果等,在下文中統(tǒng)稱為毛玻璃擬態(tài)。

前言


設(shè)計趨勢總是在不斷的變化,近幾年擬物風(fēng)格又以新的形式——新擬態(tài)回歸大眾視野,蘋果發(fā)布了macOS Big Sur 操作系統(tǒng),整體風(fēng)格應(yīng)用了新擬態(tài)的設(shè)計思路,采用了3D質(zhì)感的元素設(shè)計,其中還包含了運(yùn)用陰影、透明度以及背景模糊/高斯模糊手法模仿玻璃形態(tài),構(gòu)建空間感的新興擬物態(tài)風(fēng)格——毛玻璃擬態(tài)風(fēng)格。

undefined


一、毛玻璃擬態(tài)的歷史


毛玻璃視覺其實(shí)可以追溯到2007年微軟發(fā)售的 Windows Vista和Windows7,隨之后來的OS X 10.10(Yosemite)和iOS7中大量出現(xiàn)毛玻璃效果,比如底部快捷菜單欄、通知中心和多任務(wù)切換窗口等,蘋果公司加大了模糊程度,透明效果基于扁平,更順應(yīng)當(dāng)時UI扁平化的設(shè)計趨勢。


后來,蘋果在他們的移動操作系統(tǒng)中大大減少了毛玻璃效果,但是最近在 MacOS Big Sur 中又增加了毛玻璃質(zhì)感。微軟的 Fluent 設(shè)計系統(tǒng)也非常注重這一效果,他們稱這種效果為 “亞克力”,并將其作為設(shè)計系統(tǒng)的組成部分之一。


二、毛玻璃擬態(tài)的特征及優(yōu)缺點(diǎn)


1.毛玻璃擬態(tài)的特征

毛玻璃擬態(tài)模仿了塑料材質(zhì)(凹凸質(zhì)感,凸顯層次感),這個新的視覺風(fēng)格更加注重垂直空間Z軸的使用:

—透明感(使用背景模糊/高斯模糊的磨砂玻璃效果)

—物體漂浮在空間中,通過前后關(guān)系表現(xiàn)層次感

—鮮艷的色彩感,更突出了模糊的透明度

—半透明物體邊緣的微妙處理,采用細(xì)膩的邊框來表現(xiàn)玻璃質(zhì)感

這是注重空間感的典型特征,意味著這種風(fēng)格有助于用戶建立界面的層次結(jié)構(gòu)和深度。用戶可以看到物體間的層次關(guān)系,哪一層在哪一層之上,就像空間中真實(shí)的玻璃一樣。


2.毛玻璃擬態(tài)的優(yōu)缺點(diǎn)


優(yōu)點(diǎn):

毛玻璃擬態(tài)效果之所以被大家應(yīng)用和認(rèn)可除了它能帶來的優(yōu)秀視覺表現(xiàn),更重要的是其本身的功能意義,它能幫助設(shè)計師更好的拉開信息層級并達(dá)到視覺統(tǒng)一

(1)視覺表達(dá)

通過背景毛玻璃化,可以中和扁平化圖文帶來的生硬不立體。在卡片元素上添加毛玻璃效果,與其他元素疊加后視覺上建立層次感,將信息層級更好的表達(dá)出來;在圖標(biāo)中增加毛玻璃效果,可以提升圖標(biāo)通透的質(zhì)感。

(2)品牌感

良好的視覺統(tǒng)一,有助于提升產(chǎn)品的品牌感。


不足:

毛玻璃擬態(tài)效果并不好應(yīng)用于上線產(chǎn)品。它不適用于按鈕或開關(guān)(這些重要的界面元素應(yīng)該具備高對比度,更加清晰明確),模糊效果也要注意分寸,屏幕上過度使用模糊效果,會使整個 UI 對某些用戶可閱讀性差,同時也會使頁面看起來顯臟。

也可以這樣理解,使用毛玻璃擬態(tài)風(fēng)格的前提是卡片內(nèi)部有足夠的對比度和合適的間距來定義層次結(jié)構(gòu),并在視覺上 “分組” 所有相關(guān)的對象。它可以只在一個元素上使用,也可以作為卡片背景修飾視覺效果,這種很容易達(dá)到較好的視覺效果,頁面風(fēng)格也會特別亮眼,整體干凈、明亮。


三、毛玻璃擬態(tài)的應(yīng)用


1.卡片背景

用作卡片背景時,能很好的表達(dá)信息之間的層級感,朦朧透出下層視覺元素,營造了良好的視覺美感。


2.APP圖標(biāo)

用作APP圖標(biāo),可以提升圖標(biāo)通透的質(zhì)感。常見的三種圖標(biāo)案例:A.頂部圖形為白色,底部圖形為其他色;B.頂部圖形和底部圖形為同色,頂部圖形顏色明度高;C.頂部圖形和底部圖形不同色


3.界面包裝

運(yùn)用毛玻璃去包裝UI界面,頁面風(fēng)格整體干凈、明亮,有較好的視覺效果。


四、毛玻璃擬態(tài)繪制原理


1.和任何基于卡片的布局一樣,物體離我們越近,它吸引的光就越多。在這種情況下,意味著它會更透明一些。

2. 整個效果的基礎(chǔ)是陰影、透明度和背景模糊的組合。這種風(fēng)格可以使用一個透明層,也可以使用多個透明層,但多個透明層疊加在復(fù)雜彩色背景上的效果會更好(當(dāng)至少兩個透明層出現(xiàn)在一個相當(dāng)復(fù)雜的彩色背景上時,玻璃形態(tài)的效果是最突出的)。


五、毛玻璃擬態(tài)-卡片背景的繪制要點(diǎn)


1. 如何設(shè)置正確的透明度

重要的是要記住,你不能讓整個形狀透明,需要調(diào)整填充的透明度來達(dá)到透明效果。如果不調(diào)整填充的透明度,僅僅是調(diào)整整個對象的透明度,就不會產(chǎn)生模糊的效果。

在上面的例子中,背景模糊值完全相同,但圓形圖像的疊加效果看起來完全不同。當(dāng)填充不透明度為 100% 時,對象的透明度再低也沒有用,根本無法得到想要的模糊效果。


2.如何選擇合適的背景

最底層背景在這個效果中扮演著重要的角色。不能太簡單或太單調(diào),否則毛玻璃效果就看不出來,但也不能太復(fù)雜。

復(fù)雜的背景有助于玻璃形態(tài)的展現(xiàn),這可能就是蘋果選擇了彩色背景作為 MacOS Big Sur 默認(rèn)壁紙的原因。當(dāng)模糊的透明層位于背景之上時,那些容易辨別的色調(diào)差異也很容易被看到。


六、毛玻璃擬態(tài)-圖標(biāo)的簡版教程


用作卡片背景繪制操作比較簡單,使用背景模糊就可以搞定,重點(diǎn)在于根據(jù)實(shí)際情況進(jìn)行透明度和模糊度的調(diào)整,這里就不再做展示。


下面是毛玻璃擬態(tài)-圖標(biāo)的教程:

第一步:繪制基礎(chǔ)圖形,頂部圖形顏色#DDEDFF,底部圖形漸變色#00EDFB——#001EEE

第二步:底部圖形復(fù)制一層,做高斯模糊效果,高斯模糊:12,不透明度72%,將模糊層置于頂部圖形上,添加蒙版

第三步:為了更好的增加圖標(biāo)辨識度,增加漸變描邊,漸變色#FFFFFF——#D5E9FF,圖標(biāo)繪制完成。

過程中用到的色值和模糊度可以根據(jù)視覺美觀度做適當(dāng)調(diào)整,也可為圖標(biāo)增加陰影,提升整體效果。


結(jié)束語


作為設(shè)計師,我們可以看到,設(shè)計趨勢一直在變化,每隔幾年就會轉(zhuǎn)向另一種風(fēng)格,但似乎每種風(fēng)格又有自己的前世今生。所謂趨勢輪回,并不只是單純的回歸,而是以一種的更豐富、更立體、更具有層次感的方式呈現(xiàn)在人們面前。

我們要做的就是不盲目,不盲從,看清楚趨勢變化的本質(zhì)。


文章來源:站酷   作者:April_Firefly 

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


資訊流到底該左文右圖還是左圖右文?

資深UI設(shè)計者

背景

經(jīng)常使用或者關(guān)注資訊類產(chǎn)品的同學(xué)可能會留意到,在信息流中,有的標(biāo)題在左圖片在右,而有的是圖片在左標(biāo)題在右,這兩種形式看似區(qū)別不大,但又似乎存在很大差異。設(shè)計師在設(shè)計時是如何考慮的?我認(rèn)為這是一個很有意思的話題,所以今天就和大家聊一聊在資訊流中,左文右圖和左圖右文的差異。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

左文右圖

左文右圖的樣式普遍出現(xiàn)在新聞資訊產(chǎn)品中,其中包括今日頭條、騰訊新聞、UC瀏覽器信息流以及我們的vivo瀏覽器信息流等等,現(xiàn)在就讓我們從資訊平臺作為切入點(diǎn),對左文右圖的形式進(jìn)行分析

1. 左文右圖符合人們長久以來的閱讀習(xí)慣

按照已知經(jīng)過驗(yàn)證的理論,即F閱讀順序(尼爾森的用戶閱讀視線模型),用戶瀏覽頁面的順序是從左往右自上而下,因此左上角的信息最早觸達(dá)用戶。然而至文字誕生以來,多數(shù)情況下,人類普遍通過文字來獲取信息,我們不否定,通常情況下圖片的易識別性遠(yuǎn)優(yōu)于文字,但是從信息傳遞的準(zhǔn)確性以及豐富性上來說,文字的優(yōu)勢是遠(yuǎn)大于圖片的。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

所以在資訊類產(chǎn)品中我們更傾向于優(yōu)先通過文字來識別內(nèi)容,而將圖片作為輔助信息,因此根據(jù)我們從左往右自上而下閱讀習(xí)慣,將文字放在左邊更有利于用戶獲取信息。我們通過一個案例來分別了解一下左圖右文與左文右圖的用戶閱讀路徑是什么樣的。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

在上面的案例中,左圖右文用戶的閱讀路徑偏長,并且常常出現(xiàn)視線的折返

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

左文右圖用戶的閱讀路徑較短,不會有視線的折反。因此,基于效率和閱讀習(xí)慣的角度來說,左文右圖優(yōu)勢更明顯。

但或許這里就會有人提出疑問 “在資訊類信息流中很大一部分用戶都是因?yàn)槭軋D片的吸引才會對該則新聞感興趣的呀” 。的確,這是一個普遍場景,但是在前面我們也提到,圖片的易識別性是遠(yuǎn)高于文字的,因此哪怕是將圖片放在文字后面,對于圖片的“魅力”的影響是在可接受范圍內(nèi)的。

2. 左文右圖更有利于為用戶提供統(tǒng)一的閱讀基準(zhǔn)位置

在資訊信息流中,為了信息展示的多樣性,避免單一的信息流結(jié)構(gòu)使用戶感到單調(diào),在樣式上除了左文右圖的樣式,往往還會搭配三圖、大圖及視頻的樣式出現(xiàn),而在這樣多種穿插樣式的情況下,左文右圖能夠?yàn)橛脩舻碾p眼提供了一個掃讀時候的基準(zhǔn)位置,在大量、長時間閱讀的過程中,極大地減小了閱讀壓力

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

3. 盡可能保持整體信息流圖文閱讀先后順序的一致性

資訊流中除了左文右圖的樣式,還會搭配三圖、大圖及視頻的樣式出現(xiàn),因此我們不僅僅要考慮單個信息流樣式的閱讀體驗(yàn),更要保持整體信息流閱讀先后順序的一致性,這能夠?yàn)橛脩籼峁┹^好的沉浸式體驗(yàn)。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

4. 在視覺上更符合格式塔閉合原理

左圖右文的的形式在標(biāo)題文字較短的情況下,右上角就會出現(xiàn)視覺上的缺角,這會破壞頁面整體的工整性,而左文右圖的形式就很好的避免了這個問題。格式塔原理對閉合的研究中提到,人的大腦無論看見什么東西,都喜歡去將它們想象成為一個整體,如果元素太過雜亂大腦無法將其歸類成為一個整體,那么視覺感受就是非常不佳的。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

小結(jié):左圖右文基于它在信息獲取效率和人們閱讀習(xí)慣上的優(yōu)勢得到各大新聞資訊類產(chǎn)品的青睞,是較為通用的形式。那是不是就沒有“左圖右文”什么事了?其實(shí)不然,左圖右文仍是有其優(yōu)勢的,并且在特定場景下,左圖右文的形式的優(yōu)勢會更明顯。

左圖右文

1. 圖片在左側(cè),第一時間吸引用戶視線

在內(nèi)容形式的吸引力上,視頻>圖片>文字,并且前面我們提到,圖片的易識別性是高于文字的,因此一張高質(zhì)量的圖片往往能夠在第一時間觸達(dá)用戶并形成轉(zhuǎn)化。但前提要求是我們能夠把控圖片的質(zhì)量,否則效果將適得其反,所以我們說左圖右文的樣式一般更適合用來承載PGC的內(nèi)容。例如主打品質(zhì)時政新聞的資訊產(chǎn)品澎湃新聞以及垂類游戲資訊社區(qū)平臺篝火營地,其推薦的內(nèi)容都來自專業(yè)團(tuán)隊的輸出,對內(nèi)容圖片的質(zhì)量有較好的掌控力,因此采用了左圖右文的形式優(yōu)先給用戶展示圖片信息,以提升用戶對內(nèi)容的興趣。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

2. 在帶有明確目的閱讀場景下,例如查找歷史內(nèi)容、搜索等,左圖右文的形式效率更高

在用戶帶有明確目的場景進(jìn)行信息閱讀時,用戶往往對內(nèi)容已經(jīng)有了一個大致的預(yù)期,所以這個時候如果我們能讓用戶第一時間識別圖片,能夠大大的提升用戶的操作效率。例如用戶在查找一篇曾經(jīng)看過的文章時,當(dāng)曾經(jīng)閱讀過那篇文章的封面出現(xiàn)在屏幕中時,用戶便能立刻作出判斷,這會比在眾多文字標(biāo)題中查找更為便捷。

總結(jié)

左文右圖

  • 通常情況下,我們優(yōu)先通過文字來獲取訊息,因此在一般的信息流中,更青睞采用左文右圖的方式,以提升效率
  • 左文右圖能夠?yàn)橛脩籼峁┙y(tǒng)一的閱讀基準(zhǔn)位置,在用戶長時間瀏覽時減少閱讀壓力
  • 更好的滿足格式塔閉合原理,使信息流整體的頁面更加工整

左圖右文

  • 左圖右文常被用來承載PGC的內(nèi)容。在能夠確保圖片質(zhì)量的情況下,圖片在左側(cè),更容易引起用戶對帖子的興趣
  • 在帶有明確目的閱讀場景下,例如查找歷史內(nèi)容、搜索等,左圖右文的形式效率更高

#Tips

無論是左文右圖還是左圖右文都各有其優(yōu)勢及適用的場景,但當(dāng)我們在設(shè)計信息流時,我們要注意為用戶提供圖文閱讀順序一致的體驗(yàn)。

資訊流到底該左文右圖還是左圖右文?來看這篇深度分析!

以上是個人對資訊流左文右圖&左圖右文的一些思考和心得,感謝大家的閱讀,假設(shè)通過本次閱讀能夠給大家今后的工作帶來一些啟發(fā)和思考,那就實(shí)在是再好不過的事了:)

文章來源:優(yōu)設(shè)   作者:VMIC UED.寶紅HOM

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


一起聊B端設(shè)計 - 如何設(shè)計表格?

前端達(dá)人

表格淺談,多多指教


 

 

1) 數(shù)據(jù)查看

 

讓我們先來回顧一下表格的基本構(gòu)成,最上面的為表頭,橫為行,縱為列,內(nèi)容區(qū)每一組展示數(shù)據(jù)區(qū)域?yàn)閱卧瘛?

 

表格的設(shè)計,雖然看似簡單,但是作為用戶最常用的組件之一,我們需要對視覺和交互的精準(zhǔn)把握,才能保證用戶在使用表格時更加。

 

這里我推薦表格的"四維自檢法“,對我們設(shè)計的表格是否合理,做出一個標(biāo)準(zhǔn)的判斷。

分別是:信息降噪、呼吸適中、易讀、詳情查看。

 

信息降噪:分別對表格內(nèi)容和視覺層面進(jìn)行重要性梳理,剝離不重要的元素,使表格輕量化;

呼吸適中:保持內(nèi)容和元素之間合適的間距,使表格頁擁有一個好的呼吸感,將給用戶營造一個舒適的操作環(huán)境;

易讀:通過對需求內(nèi)容的解讀,對內(nèi)容形式加以分類辨別,做出可讀性最強(qiáng)的樣式;

詳情查看:b端系統(tǒng)往往伴隨著表格數(shù)據(jù)類目龐大的問題,通常會采用另一種形式去展示全部信息。

 

1.1  信息降噪

 

1.1.1 精簡表格內(nèi)容

當(dāng)表格的字段非常重要時,一定要將字段全部展示出來讓用戶更清晰的了解數(shù)據(jù)。

如果你的用戶只需要了解部分字段,那么全部展示是沒有必要的,只需在展示最重要的字段即可。

 

 

1.1.2 自定義字段展示

不同用戶想看的的信息側(cè)重不同,有時候我們無法準(zhǔn)確判斷用戶看重哪些字段,還可以讓用戶自定義展示字段。

 

 

1.1.3 精簡字段名稱

當(dāng)我們?nèi)ピO(shè)計表格的時候,通常會發(fā)現(xiàn)表格需要承載的信息量是非常大的,有時候?yàn)榱吮憩F(xiàn)出字段的準(zhǔn)確含義,在定義字段名稱時往往會非常的長。但是當(dāng)這些字段同時出現(xiàn)在一個表格里時,過長的字段名稱,又會顯得冗余,讓本就不大的頁面空間更加雜亂。

所以當(dāng)我們設(shè)計表格的時候,我們可以分析字段名稱,對字段名稱做精簡,看看是不是少一個字用戶就無法理解字段的含義。

 

 

1.1.4 添加字段說明

當(dāng)字段名稱過長,又必須展示,才能有效的理解字段含義時。我們可以定義一個專有名詞代替,并且在字段名稱后使用添加字段說明的形式,來對字段加以說明。

這樣一來用戶既可以清晰的理解字段含義,又可以在有限的頁面空間下獲取到更多的數(shù)據(jù)信息。

 

 

1.1.5 簡化表格樣式

早期表格的設(shè)計,出發(fā)點(diǎn)主要以擬物形式,以最接近現(xiàn)實(shí)表格的樣式去設(shè)計。

但是隨著互聯(lián)網(wǎng)的普及度加深,極簡的表格設(shè)計,使界面更加輕盈,讓用戶更加專注于數(shù)據(jù)內(nèi)容。

去除縱向列的分割線,僅以淺色的橫向分割線區(qū)分行,但是要注意分割的顏色不能過于淺而缺乏辨識度,部分人群對顏色的辨識度會偏低,顯示器的硬件性能也會影響顏色的可辨識性。

 

 

1.1.6 減少不必要的顏色區(qū)分

表格設(shè)計中一定不要使用過多的顏色區(qū)做狀態(tài)或操作的區(qū)分,過多的顏色細(xì)分會使表格變得更加混亂,影響用戶體驗(yàn)。

對狀態(tài)的區(qū)分,僅用輕量的顏色區(qū)分即可,操作欄保持主色按鈕色。

 

 

1.2  呼吸適中

 

1.2.1 如何定義單元格的高度

了解單元格的結(jié)構(gòu),以及實(shí)現(xiàn)單元格的基本邏輯,有助于我們更好的去把控我們的設(shè)計。

單元格內(nèi)的可控尺寸包含:單元格高度、文字字號、文字/段落行高、文字上下間距。

我們基于視覺呼吸感,賦予各個元素合適的尺寸,我在這里給出一套參考方案:

文字字號 = N  

文字行高 = 1.5N

上下間距 = 1.2N

單元格高度 = 內(nèi)容高度 + 上間距 +下間距

 

 

1.2.2如何定義列的間距

 

首先我們要了解列的兩種類型,第一種是定寬列,第二種是自適應(yīng)列。

 

a.定寬列

顧名思義就是它的寬度是固定的,比如:第一列我們設(shè)置寬度為200px,第二列我們設(shè)置為300px,五六七列分別設(shè)為100px,那么我們這個列表就的寬度就等于200 + 300 + 100*3 = 1100px,在任何分辨率尺寸下你的這個列表都會保持這個寬度不變。

 

 

b.自適應(yīng)列

就是列會隨著分辨率變化而產(chǎn)生寬度的變化,比如:列表有五列,我們定義列表的寬度為界面寬度的50%,假定界面寬度為1200px,那么列表寬度就為600px,而每一列的寬度則為120px。此時我們將界面的寬度縮小到600px時,那么列表的寬度就為300px,而每一列的寬度則為60px。

 

在實(shí)際設(shè)計案例中,我們往往會面臨由于每一列的內(nèi)容不同,所需要的寬度也就不同,我們希望在列不多時可以保持寬度自適應(yīng),但是如果每一列都做成自適應(yīng)列的話,內(nèi)容多的列無法展示全內(nèi)容,內(nèi)容少的列空間又會很大。

所以,固定列 + 自適應(yīng)列的綜合運(yùn)用,可以讓我們更好的實(shí)現(xiàn)我們想要的設(shè)計方案。

 


c.列的結(jié)構(gòu)

然后,我們一起來了解列的結(jié)構(gòu)。每一列分為內(nèi)容區(qū)和左右間距區(qū),在固定列里面內(nèi)容區(qū)和左右間距區(qū)都是保持不變的。但是在自適應(yīng)列卻不同,它的內(nèi)容區(qū)是隨界面分辨率變化而變化的,左右間距區(qū)的寬度是保持不變的(在代碼里間距區(qū)被叫做Padding)。

 

 

d.固定列

當(dāng)表格字段數(shù)量不確定時,通常我們會為自定義列的內(nèi)容區(qū)寫一個最小值(min-width),以確保字段很少時可以自適應(yīng)寬度,字段較多時仍然能保證完整展示表格數(shù)據(jù),不影響對內(nèi)容的閱讀。

當(dāng)表格的列過多又必須全部展示時,固定必需固定的列(如姓名、任務(wù)名稱、操作項等),其他字段橫向滾動。

 

 

1.3  呼吸適中

 

1.3.1 列的對齊方式

基于人的慣性瀏覽順序,設(shè)計每列合理的對齊方式,能夠輔助用戶更的完成工作。

a.標(biāo)題和內(nèi)容:一般采用左對齊,更的瀏覽順序;

b.有長短不一的數(shù)字時(序號除外):右對齊,方便比較 ;

c.操作項一般放在尾列:右對齊;

 

 

1.3.2 不留空白格

從心理學(xué)的角度講,人對未知事物會產(chǎn)出恐懼情緒。我們在設(shè)計表格的時候,要考慮到表格的各種展示情況,非特殊情況不出現(xiàn)單元格空白。

沒有數(shù)量用“0”表示,沒有該項內(nèi)容用“-”表示。

 

 

1.3.3 選擇合適的分頁器

表格是一種可以承載大量數(shù)據(jù)的組件,當(dāng)數(shù)據(jù)行數(shù)很多時我們通常會選擇分頁器,使用分頁器有哪些優(yōu)點(diǎn):

a.快速查看:通過分頁數(shù)據(jù)加載緩解服務(wù)器壓力;

b.清晰易讀:由于界面的空間是有限的,通過分頁展示數(shù)據(jù),有助于緩解用戶的閱讀壓力;

c.靈活便捷:如果客戶想在一頁展示很多數(shù)據(jù),可以通過分頁器自行選擇,還可以了解到數(shù)據(jù)的總數(shù)目。

 

 

1.3.4 收起低頻的操作項

當(dāng)界面空間有限、表格列數(shù)很多時,如果表格的操作項過多,會占用很多頁面空間,需要有選擇的展示,將低頻操作項收起,用點(diǎn)擊更多按鈕去觸發(fā)選擇。

如果是1.0的產(chǎn)品,我們可以和產(chǎn)品經(jīng)理溝通,分析每個功能按鈕的優(yōu)先級。

如果是上線的產(chǎn)品,我們還可以通過按鈕點(diǎn)擊PV(頁面成功訪問次數(shù)),來了解按鈕的使用頻率,做出按鈕優(yōu)化。

 

 

1.3.5 行的排序

如果產(chǎn)品沒有特殊需求,那么默認(rèn)最近創(chuàng)建的在最上面。

可以用帶有排序的表頭,讓用戶自定義排序。

 

 

1.4  查看詳情

 

1.4.1 詳情入口

如果表格的內(nèi)容項很多,我們通常會在表格上只展示部分重要數(shù)據(jù),而其余數(shù)據(jù)放在詳情頁面展示。

作為詳情頁面的入口,通常會有兩種設(shè)計方式:

a.將詳情按鈕放在操作項里

b.將首行的名稱做成可點(diǎn)擊樣式,點(diǎn)擊跳轉(zhuǎn)至詳情

 

 

1.4.2 詳情頁的展開形式

如果詳情內(nèi)容不多,沒有新開頁面的必要,我們可以采用展開行、彈窗、抽屜的形式,但是要注意盡量減少過多的樣式,給用戶增加疑惑感。

如果詳情的內(nèi)容很多,而且編輯的需求,建議采用新開頁的形式。

建議根據(jù)詳情頁信息量的多少,以此采用展開行、彈窗、抽屜、新開頁的形式。

 

 

2) 數(shù)據(jù)過濾

 

數(shù)據(jù)過濾是表格頁很重要的組成部分,包含搜索、篩選、標(biāo)簽頁。

這一部分的主要作用是幫助用戶,梳理表格數(shù)據(jù)信息,精準(zhǔn)定位所需的數(shù)據(jù)項。

 

 

2.1  搜索

 

2.1.1 模糊搜索

模糊搜索是指在用戶搜索意圖不明確時,搜索引擎將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配,找出與查詢相關(guān)的內(nèi)容。模糊搜索無法理解用戶的查詢意圖,返回的結(jié)果中可能包括了一大批用戶不想要的信息,所以在使用模糊搜索時一定要結(jié)合自己的實(shí)際場景,慎重使用。

優(yōu)點(diǎn):只要有相關(guān)的內(nèi)容都會被檢索出來,減少了精準(zhǔn)搜索帶了的記憶負(fù)擔(dān)

缺點(diǎn):容易把相關(guān)的信息也帶出來,例如檢索手機(jī)號,把相關(guān)編碼也匹配出來

 

 

2.1.2 搜索

搜索是指用戶在搜索時,針對某一數(shù)據(jù)字段搜索,來查找所需要的數(shù)據(jù)。根據(jù)業(yè)務(wù)場景不同,我們會查找某一字段,或者是用標(biāo)簽切換不同字段來查找。

優(yōu)點(diǎn):搜索匹配精準(zhǔn)度高

缺點(diǎn):每次只能對單一條件進(jìn)行搜索

 

 

2.2  篩選

 

篩選器主要是針對內(nèi)容較少的字段進(jìn)行查找的一種方式, 通過篩選器的選擇可以快速定位所需的數(shù)據(jù),取消用戶輸入的過程,提升查找效率。一般篩選有兩種形式,第一種是下拉篩選,第二種是平鋪式篩選。

 

2.2.1 下拉篩選

下拉篩選就是將需要篩選的內(nèi)容放置于選擇器當(dāng)中,通過點(diǎn)擊選擇器下拉,來選擇需要篩選的內(nèi)容。

優(yōu)點(diǎn):空間利用率高,起到了很好的收納作用

缺點(diǎn):無法直觀看到所有的篩選項

 

 

2.2.2 平鋪篩選

平鋪篩選就是將篩選項的內(nèi)容,直接展示于頁面之上,通過點(diǎn)擊選擇的方式直接進(jìn)行篩選。或者可以通過自定義內(nèi)容的篩選。

優(yōu)點(diǎn):操作效率高,篩選項一目了然,支持輸入更多篩選條件

缺點(diǎn):空間利用率低,不適合選項太多的情況

 

 

2.2.3 如何合理的使用篩選項

當(dāng)數(shù)據(jù)內(nèi)容需要的篩選類目過多時,如何合理的擺放,才能提高用戶的使用效率。

a.信息排序:基于用戶使用場景,以目標(biāo)導(dǎo)向?yàn)橐罁?jù),將高頻的篩選項排列到前面,低頻的篩選項置于后面

b.默認(rèn)折疊低頻篩選項:當(dāng)篩選項過多時,會極大的占用界面空間,使用戶在閱讀數(shù)據(jù)時產(chǎn)生非常不好的用戶體驗(yàn),通過展示高頻篩選項、隱藏低頻篩選項,將更好的提升用戶體驗(yàn)。

c.所有篩選項都很低頻:以點(diǎn)擊高級篩選按鈕的形式觸發(fā),將全部篩選項置于氣泡或者彈窗之中。

 

如何判定篩選項的使用頻率呢?

通常會有兩種方式:

第一種是給篩選項增加數(shù)據(jù)埋點(diǎn),這樣一來就可以通過對用戶點(diǎn)擊行為的分析了解到篩選項的使用頻率;

第二種是用戶調(diào)研,通過問卷或者面談,了解到用戶的真實(shí)使用需求。

 


2.3  標(biāo)簽頁

 標(biāo)簽頁又叫選項卡,在組件中我們通常叫Tabs,指的是分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合。

 

2.3.1 默認(rèn)展示常用項

在使用標(biāo)簽頁時,有一點(diǎn)我們要特別注意,通常在B端設(shè)計中,我們會把標(biāo)簽頁的位置定位在最常用的一個選項。

 

2.3.2 增加數(shù)據(jù)條目

如果是訂單一類的分頁,我們還可以將數(shù)據(jù)條數(shù),展示在標(biāo)簽右側(cè),用來幫助用戶快速了解到待辦數(shù)據(jù)量。

 

 

3) 數(shù)據(jù)操作

 

3.1 分類

數(shù)據(jù)操作即對表格的數(shù)據(jù)進(jìn)行操作,首先我們對數(shù)據(jù)操作進(jìn)行分類。

 

按控制范圍分:

a.單行操作

b.批量操作

c.全局操作

 

按操作屬性分:

a.新增數(shù)據(jù)

b.編輯數(shù)據(jù)

c.刪除數(shù)據(jù)

d.業(yè)務(wù)處理

 

3.2 如何合理的設(shè)計數(shù)據(jù)操作

 

第一步,先判斷控制范圍

 

 

第二步,判斷擺放位置

 

第三步,優(yōu)化信息層級

 

 

以上是操作項和篩選項較多的情況,那么不多時,我們還是要合理利用空間,靈活設(shè)計

 

 

以上就是《如何設(shè)計表格?》的全部內(nèi)容了,后續(xù)還會努力更新更多B端設(shè)計分享!

 

與君共勉



 




轉(zhuǎn)自:站酷

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

以用戶體驗(yàn)之名,談?wù)勂髽I(yè)協(xié)作平臺的產(chǎn)品設(shè)計

前端達(dá)人

從雇傭關(guān)系看企業(yè)級協(xié)作產(chǎn)品的設(shè)計理念和原則

今年的新冠疫情突發(fā),讓企業(yè)級協(xié)作產(chǎn)品的賽道熱鬧了起來。前有釘釘,企業(yè)微信,后有飛書帶刀入場,其他廠商看了眼紅,趕緊行動起來,所以在這片一眼望不到頭的草原上,你還能看到百度的如流,美團(tuán)的大象,網(wǎng)易的popo等等。

如今疫情控制的結(jié)果也算喜人,經(jīng)過大半年的時間的市場錘煉,現(xiàn)在這些個企業(yè)協(xié)作平臺也需要被懷揣著審視的目光來看看接下來要走的路。

按照公司的要求,我在工作中頻繁的使用到“釘釘”這款產(chǎn)品,接觸的這4年多時間大概也就是企業(yè)協(xié)作平臺的發(fā)展史了,我試著總結(jié)了一下:

起初產(chǎn)品設(shè)計的初心也許僅僅是為了員工之間的交流,依托公司的組織架構(gòu),不需要在添加好友/通過驗(yàn)證之類的繁瑣流程直接溝通,有事說事賊方便。特別是消息回執(zhí)(就是被萬人唾罵的“已讀未讀”)更看出來了釘釘對溝通“效率”的重視。

坦誠的講,釘釘這點(diǎn)我很認(rèn)同,我自己也是一名用戶體驗(yàn)設(shè)計師,過去做企業(yè)級應(yīng)用的核心就是圍繞 “效率”去做的,始終把用戶路徑的長短作為我個人無形的KPI,面試跟人吹牛X的時候也是舉例說的這些。

但B端的設(shè)計就僅僅是所謂的“效率”么?唯效率的設(shè)計就一定好么?


01 效率的背后也許是姿態(tài)的傾斜


你有沒有不想打開釘釘(甚至某一時間想卸載掉)的沖動?阿里巴巴當(dāng)初推出釘釘這個在線辦公協(xié)同產(chǎn)品,出發(fā)點(diǎn)是為了方便企業(yè)內(nèi)的辦公協(xié)作,溝通記錄、文件資料、流程審批、員工名錄等都能有效得到管理,防止丟失并隨用隨取。


后來味道變了,以“釘一下”為例,發(fā)起者可以無限次的對接收者發(fā)送信息并以“增強(qiáng)提醒”語音的方式提示??吹某鰜恚@種交互設(shè)計本著觸達(dá)無障礙去做的,但卻忘記了設(shè)計使用門檻,從而造成了“誰有事誰牛X的局面”,如果沉下心來研究,會發(fā)現(xiàn)在這過程里情緒的變化是及其明顯的:

企業(yè)管理學(xué)里有一條著名的學(xué)說“峰終定律”(后被廣泛應(yīng)用到用戶體驗(yàn)領(lǐng)域里),大概是意思是:“在一段體驗(yàn)的高峰和結(jié)尾,體驗(yàn)是愉悅的,那么對整個體驗(yàn)的感受就是愉悅的”。

那么釘釘?shù)倪@些個機(jī)制可能就是峰終定律的反面教材了。每一個企業(yè)級協(xié)作平臺企業(yè)都在標(biāo)榜自己的創(chuàng)新和功能的全面,殊不知這就是典型的通過產(chǎn)品功能機(jī)制進(jìn)行的微觀管理,間接加劇雇傭關(guān)系的僵持。甚至一定程度上變成了控制…員工和企業(yè)的關(guān)系我不好說,但這些企業(yè)協(xié)作平臺真真實(shí)實(shí)的在彼此關(guān)系上掃滿了鹽。


02 固化的設(shè)計理念


翻看了眾多大廠的B端設(shè)計原則和設(shè)計理念,無一例外,所有的被沉淀下來的“原則”幾乎都是“效率”,甚至一提到跟B端相關(guān)的設(shè)計就永遠(yuǎn)是“效率!效率!!效率?。?!”:

以效率為核心的設(shè)計幫助任務(wù)流更的完成,就這點(diǎn)無可厚非,我自己也是一名用戶體驗(yàn)設(shè)計師,過去做企業(yè)級應(yīng)用的核心就是圍繞“效率”去做的,始終把用戶路徑的長短作為我個人無形的KPI,面試跟人吹牛X的時候也是舉例說的這些。


然而不同于C,企業(yè)協(xié)作平臺是企業(yè)要求員工統(tǒng)一使用的協(xié)作產(chǎn)品,為了方便信息集中管控,絕企業(yè)員工被迫通過一次學(xué)習(xí)后逐漸轉(zhuǎn)為不用動腦子的肌肉記憶。B端員工只想要“干完活”,C端的“圖新鮮”是發(fā)自內(nèi)心的去找樂子。所以當(dāng)被強(qiáng)迫完成任務(wù)的情況下,大部分情況下是一個偽命題。


03 設(shè)計原則要講究“真人性”


通過審視的目光去看當(dāng)下的設(shè)計原則,企業(yè)級協(xié)作平臺經(jīng)歷了起始期的“溝通剛需”和發(fā)展期的“功能堆疊”后,未來應(yīng)該多考慮“員工與組織”/“員工與企業(yè)”的大命題,希望是以“橋梁”的姿態(tài)出現(xiàn),以幫助雙方更好的完成工作為目標(biāo)去設(shè)計:

這其中有兩點(diǎn)需要著重注意:

1. 效率從人性出發(fā)

先說個題外話,過去,我們在求職時期的路徑大概率是到某幾個招聘網(wǎng)站上挨個填寫個人信息/工作經(jīng)歷/獲獎情況,但伴隨著 OCR技術(shù)成熟,一個word/pdf上傳,自動識別了所有信息,幫助企業(yè)和候選人大幅的解放了勞動力。與之類似的是:日報周報月報,除了工作總結(jié)偏腦力勞動需要人工產(chǎn)出之外,工作內(nèi)容這種條目的列舉完全可以幫員工包辦了,畢竟釘釘上記錄了大量的工作文件和日志。單靠一個周報模版絲毫解決不了問題。

2. 情感化設(shè)計不能只停留在表象上

之前跟釘釘?shù)脑O(shè)計師有過情感化設(shè)計的交流,對方對情感化的理解更多體現(xiàn)在人文關(guān)懷上,特別是在打卡這個功能上,超過幾點(diǎn)下班打卡后會有一句暖心的話激勵員工。對此我還是保留意見,理智支撐我不許叫這個設(shè)計為情感化設(shè)計,因?yàn)槊篮玫奈淖趾推恋膱D形都只是表象而已,并沒有幫助用戶解決問題,所以頂多就是圖形設(shè)計,說的好聽點(diǎn)是graphic design。

我理解的情感化,從始至終要以解決用戶問題出發(fā),與其有時間畫畫漂亮的圖形,不如去做業(yè)務(wù)的橫向打通,幫助在深夜快點(diǎn)打車回家來的更實(shí)在。


總結(jié)一下


總的來說就目前國內(nèi)像這種B端企業(yè)級應(yīng)用真的還就是處在功能打通的階段,未來去balance雇傭關(guān)系的大局面市場還是很大的,從這個角度來看這個賽道還有的一拼,期待更多的大廠入場來改善僵持的雇傭關(guān)系。


轉(zhuǎn)自:站酷

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


日歷

鏈接

個人資料

存檔