本文是對(duì)成熟組件的一些思考，借此希望能鼓勵(lì)同學(xué)們多多去探索下現(xiàn)在一些常用組件設(shè)計(jì)之初的設(shè)計(jì)原則和適應(yīng)場(chǎng)景等，撬動(dòng)你對(duì)設(shè)計(jì)樣式的思考。

作為一個(gè)用戶體驗(yàn)設(shè)計(jì)師，套用成熟的設(shè)計(jì)樣式是司空見(jiàn)慣的事。這樣的組件是經(jīng)過(guò)市場(chǎng)檢驗(yàn)的，再者說(shuō)使用這些樣式打造的界面是繼承了用戶習(xí)慣的，可以降低學(xué)習(xí)成本，提高易學(xué)性。

然有些同學(xué)會(huì)認(rèn)為這種方式會(huì)抹殺創(chuàng)造力，最終所有的應(yīng)用界面同質(zhì)化。但是作為一個(gè)用戶體驗(yàn)設(shè)計(jì)師我還看到了一個(gè)不一樣的問(wèn)題。當(dāng)你習(xí)慣了“拿來(lái)主義”的方式以后，會(huì)讓你對(duì)你常用的這些應(yīng)用，比如谷歌、臉書(shū)、instagram產(chǎn)生依賴，甚至盲目相信，從而失去自己的思考。下文中提及了一些我們常用的一些組件的不一樣角度的分析，希望在你閱讀完之后能夠撬動(dòng)你的思考。

1、隱藏的導(dǎo)航

網(wǎng)上有成千上萬(wàn)的文章提及或描繪漢堡圖標(biāo)，大多數(shù)都是來(lái)自我們?cè)O(shè)計(jì)師的。如果你沒(méi)看過(guò)，可以選擇一到兩篇閱讀就能知道大概。當(dāng)然，文章不是對(duì)圖標(biāo)的討論，而是漢堡圖標(biāo)背后的導(dǎo)航方式的分析。

我們可以看到漢堡圖標(biāo)的導(dǎo)航方式對(duì)于設(shè)計(jì)師其實(shí)是具有較大的吸引力的，它給設(shè)計(jì)師帶來(lái)便利，有了這樣利器，在設(shè)計(jì)的時(shí)候再也不用為屏幕僅有的方寸面積發(fā)愁，你可以把整個(gè)導(dǎo)航放到左側(cè)或右側(cè)上下滾動(dòng)的界面中，等著用戶滑動(dòng)去發(fā)現(xiàn)。

但是其實(shí)我們發(fā)現(xiàn)Youtube已經(jīng)偷偷的把之前的漢堡圖標(biāo)去掉，取而代之的是把用戶特別關(guān)心的菜單直接提到主界面上，此后他用戶量，用戶滿意度，甚至是收入都增加了。現(xiàn)在很多大牌應(yīng)用已經(jīng)開(kāi)始從漢堡圖標(biāo)中撤離，轉(zhuǎn)而去把用戶最關(guān)心的菜單放在主界面上。隱藏的方式不一定能帶來(lái)好的體驗(yàn)，試試采用優(yōu)先級(jí)的方式去呈現(xiàn)菜單。

2、無(wú)處不在的圖標(biāo)

因?yàn)槠聊坏姆酱缈臻g限制，所以不假思索認(rèn)為要盡可能使用圖標(biāo)去替代文字。誠(chéng)然，圖標(biāo)確實(shí)能節(jié)省空間，亦能省去翻譯的麻煩（國(guó)際化的工作量不小，其他的應(yīng)用也是這么做得。）那我們有沒(méi)有反問(wèn)我們自己用戶真的熟悉這些圖標(biāo)嗎？

帶著這樣的疑問(wèn)我們回憶下我們使用過(guò)或設(shè)計(jì)過(guò)的應(yīng)用，你僅通過(guò)圖標(biāo)就能知道某個(gè)圖標(biāo)代表的功能嗎？我們常常天然認(rèn)為用戶也和我們一樣理解圖標(biāo)背后的含義，而且用戶是非常愿意花時(shí)間去研究和探索的，但是其實(shí)事實(shí)經(jīng)常和我們的yy不符。當(dāng)然這并不是說(shuō)我們就不要使用圖標(biāo)了。生活中有些圖標(biāo)已經(jīng)有既定含義了，這些你可以去使用，比如搜索，視頻播放，郵件，設(shè)置，電話等等。對(duì)于復(fù)雜功能，最好是使用圖標(biāo)+文字，這樣的組合方式能讓用戶更快的發(fā)現(xiàn)，帶來(lái)好的點(diǎn)擊感受，同時(shí)增加了個(gè)性。

3、手勢(shì)操作

2007隨蘋(píng)果手機(jī)應(yīng)運(yùn)而生，從此多點(diǎn)觸控技術(shù)成為了觸摸屏的主角，通過(guò)此技術(shù)用戶不僅僅可以點(diǎn)，拍，而且還能使滑、捏、拉等操作方式。因?yàn)槟芄?jié)省屏幕空間，所以與隱藏導(dǎo)航、圖標(biāo)的隱藏類似，手勢(shì)也是設(shè)計(jì)師們樂(lè)此不疲的利器。比如，用左滑或者右滑取代了之前的刪除按鈕。

讓我們?cè)賹?duì)手勢(shì)做個(gè)分析，首先手勢(shì)其實(shí)是一類隱藏技，需要用戶去記住它，所以類似漢堡圖標(biāo)，如果你隱藏了它，很少人會(huì)去挖掘使用；其次，類似于圖標(biāo)一樣，大多數(shù)用戶知道點(diǎn)擊，放大，滾動(dòng)，但是其余的一些操作對(duì)于不同的應(yīng)用有不同的功能，這個(gè)對(duì)于用戶負(fù)擔(dān)很大。所以在此強(qiáng)調(diào)下，手勢(shì)設(shè)計(jì)是隱藏類的操作，所以需要用戶花精力努力去記住它們。

4、入駐時(shí)的模態(tài)教程

入駐的模態(tài)教程紅極一時(shí)，一般出現(xiàn)在用戶在使用應(yīng)用之前，一般的教程都會(huì)給用戶帶來(lái)界面的注解。那為什么我們說(shuō)這個(gè)解決方案有問(wèn)題呢？觀察周圍，你會(huì)發(fā)現(xiàn)在使用它時(shí)，選擇的是直接跳過(guò)，他們想盡快的使用應(yīng)用。試問(wèn)你買回手機(jī)的時(shí)候會(huì)看說(shuō)明書(shū)嗎？就算有的真就是看過(guò)了，他們一會(huì)也就忘記了。俗話說(shuō)的好“ A user interface is like a joke, if you have to explain it, ?it’s not that good.”

其實(shí)入駐后的使用說(shuō)明可以做得更為融合。比如Slack采用的方式，在首屏幕的時(shí)候會(huì)聚焦介紹下應(yīng)用會(huì)給用戶帶來(lái)哪些益處。當(dāng)然還有更好的，一種互動(dòng)性更強(qiáng)的，方法就是逐步帶入應(yīng)用增強(qiáng)技能。Duolingo的帶入就沒(méi)有在如何使用應(yīng)用出“說(shuō)明書(shū)“，它鼓勵(lì)用戶單刀直入去做語(yǔ)言選擇和測(cè)試，這個(gè)步驟不用注冊(cè)就可開(kāi)始，因?yàn)樽詈玫恼f(shuō)明方式其實(shí)是融合在使用過(guò)程中的，這樣的方式可以提前讓用戶知道應(yīng)用給他帶來(lái)的價(jià)值，畢竟說(shuō)的不如做得來(lái)的印象深刻。所以當(dāng)你在一個(gè)半透明層上設(shè)計(jì)使用教程的時(shí)候，先思考下用戶首次使用的時(shí)候的場(chǎng)景，以更好的方式來(lái)歡迎我們的用戶。

小結(jié)

上面提及的內(nèi)容不代表周邊的設(shè)計(jì)樣式不值得我們參考，只是在用之前，我們可以更深入的去了解它們?cè)O(shè)計(jì)之初的含義，一些樣式可能在A應(yīng)用取得了成功，但其實(shí)并不一定適用B應(yīng)用。同學(xué)們需要多思考，多做自己的設(shè)計(jì)，多做設(shè)計(jì)的研究。如果你的設(shè)計(jì)更適合不用擔(dān)心與規(guī)范的沖突。

原作者：Zoltan Kollin

本文由 @agileyang 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。