視 覺設(shè)計有一個天然的困難，因為視覺風(fēng)格是一個很主觀的感受，所以設(shè)計師很難說服領(lǐng)導(dǎo)和其他人認(rèn)可這種感受。如果恰巧你的設(shè)計和需求方的審美一致那都好說， 但是如果不一致，那就有設(shè)計師好受的了。另外視覺設(shè)計也很難被衡量評判，也許團(tuán)隊都認(rèn)為設(shè)計的不錯，但是有什么客觀的證據(jù)去證明這個設(shè)計真的就是對的嗎？ 所以視覺設(shè)計師這個職業(yè)上升天然就有一道坎。

但是更可悲的是，我發(fā)現(xiàn)很多設(shè)計師并沒有很努力去改進(jìn)這種狀態(tài)，因為長期的壓抑和抱怨，很多設(shè)計師更樂忠于學(xué)習(xí)技巧工具和新的設(shè)計風(fēng)格，而不是對設(shè)計方法和設(shè)計流程探索研究。設(shè)計成果是否能幫助項目不重要，設(shè)計的夠不夠?qū)拧⒛懿荒苣玫贸鍪帧⒛芊癖煌斜頁P(yáng)才是最重要的。

所以我今天想分享一個很古老也很基礎(chǔ)的設(shè)計流程，當(dāng)我們團(tuán)隊在遇到視覺設(shè)計難題的時候，我們往往會試著通過這個方法找到靈感和把方案順暢的推進(jìn)下去。

編者按：移動的觸控時代早已到來，您是否也與時俱進(jìn)了呢？今天騰訊CDC這篇好文，從什么是觸控手勢、觸控手勢的使用場景/基本操作，有哪些好用的觸控手勢、手勢設(shè)計守則五個方面幫你全方位學(xué)習(xí)這個知識點，交互設(shè)計師來收！

一直以來，交互設(shè)計師都是一個受到廣泛質(zhì)疑的崗位，很多人不了解交互設(shè)計師的價值，更直接的說，我們大多數(shù)的交互設(shè)計師沒有表現(xiàn)出足夠的、令人信服的專業(yè)度。

移動App以單手操作為主，界面上重要元素需要在用戶單手點擊范圍內(nèi)，或者提供快捷的手勢操作。

當(dāng)瀏覽網(wǎng)站時，我們喜歡看頁面設(shè)計展示出干凈、清爽的對比。對比達(dá)到了一個重要的目的——它使內(nèi)容可讀，并毫不費力地在頁面上指導(dǎo)用戶。這是一個最基本的設(shè)計概念，只是很奇怪，有些網(wǎng)站似乎就是不明白。

沒有足夠的對比度的話，不管是顏色或整體展示，一個網(wǎng)站看起來，在最好的情況下，也會讓你覺得有點兒丈二和尚摸不著頭腦，在最壞的情況下，將會使頁面完全不可讀。

@米_亓 ：最近一直在做交互規(guī)范總結(jié)的工作，在不斷梳理頁面間跳轉(zhuǎn)邏輯的同時，發(fā)現(xiàn)頁面間的邏輯關(guān)系并不能和頁面間跳轉(zhuǎn)的動效很好的結(jié)合上。雖然只是零點幾秒的切換動效，卻能在一定程度上影響用戶對于頁面間邏輯的認(rèn)知。為了輸出詳細(xì)的規(guī)范，花了大量時間把玩現(xiàn)在公司線上的產(chǎn)品以及國內(nèi)外優(yōu)秀的APP，尤其是蘋果、谷歌自己開發(fā)的APP。（如果某些方面在設(shè)計規(guī)范中并沒有給出答案，就在原生APP中找答案吧！）

隨著移動互聯(lián)網(wǎng)的迅猛發(fā)展，使得移動產(chǎn)品設(shè)計人員急缺。由于高薪酬，很多其他行業(yè)設(shè)計師轉(zhuǎn)行做UI設(shè)計。

那么到底什么是UI設(shè)計？

做UI設(shè)計需要掌握哪些知識體系？

如何去學(xué)習(xí)？

今后如何做職業(yè)規(guī)劃？

是很多新人常會遇到的問題！

針對這些問題，給大家一個比較全面的解釋，希望能幫到新入行移動設(shè)計的人！

@琛桑要做芝麻藝人 ：作為入行不久的交互設(shè)計師，我發(fā)現(xiàn)自己在交互設(shè)計的實踐中無法顧及到方方面面，是存在思維盲區(qū)的。其中有欠缺經(jīng)驗的原因，也有自身知識局限的問題。進(jìn)入開發(fā)階段后，每次需要修改交互時，心里都會有些慚愧，感覺為小伙伴們帶來了不必要的工作量。

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

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

來源：莫貝網(wǎng)

所以，本文章會通過三個真實但抽象的例子說明工作中『放按鈕』是怎么做的。真實說的是案例來源于實戰(zhàn)，抽象就是提煉出思維但講的場景都是虛擬的，免得透露機(jī)密。有趣的是，三個按理都和時間、時效有關(guān)。

案例一

虛擬場景：某訂單頁面，商品訂單以卡片的形式羅列，每個卡片下方有若干操作按鈕，如支付、取消、投訴等。根據(jù)規(guī)則，投訴按鈕必須在訂單產(chǎn)生2天后才可使用。

現(xiàn)狀：目前產(chǎn)品線上的設(shè)計方案是，幾個按鈕同時呈現(xiàn)可點擊狀態(tài)，當(dāng)投訴按鈕處于可用時間段內(nèi)時，點擊就會去往一個投訴頁面填寫投訴申請；當(dāng)目前處于不可投訴時間段內(nèi)，投訴按鈕點擊后彈窗提醒用戶：還有 XXX 時間才可發(fā)起投訴。

目標(biāo)：提出這個案例時，我們希望讓這個操作過程更加自然，不要讓用戶點擊了之后才告訴用戶這個功能不可用，而不要脫離用戶的交互期望（如果按鈕可用，交互期望就應(yīng)該是實現(xiàn)相應(yīng)的功能）。

設(shè)計過程：

最開始考慮這個案例時，我的第一反應(yīng)就是如果一個按鈕當(dāng)前是不可用的，就應(yīng)該隱藏起來，這個場景按鈕還是挺擠的，明明不能用的東西為什么要放在界面中吸引視線呢？

但是很明顯，這個第一感覺有嚴(yán)重的硬傷。首先，對于一個按鈕或功能，告訴用戶這個東西不可用，和不告訴用戶有這個功能，是完全兩碼事。尤其是一個存在可用/不可用兩種狀態(tài)的按鈕，在特定時間將其隱藏的風(fēng)險非常大——你不知道這個功能的被需要度多高。

于是，我們?nèi)ゲ殚喠艘幌聰?shù)據(jù)和之前的設(shè)計方案。首先得出的結(jié)論是，這個按鈕的點擊率不低（超過10%的用戶，而且這個頁面的總 pv 非常高），其次，以前有嘗試過把這個按鈕直接在不可用時隱藏的設(shè)計，但是立刻引來了大量的客服投訴——用戶找不到投訴入口在哪里了。

所以，似乎數(shù)據(jù)和歷史方案幫助我們排除了第一種做法，也就是直接隱藏按鈕。那在不可用期間把按鈕置灰怎么樣？

置灰的好處在于，用戶一眼就能看到這個功能的存在，同時又能知道這個功能暫時是不可用的。但是問題也來了，怎么知道這個按鈕什么時候可點什么時候不可點？一個解決方案是在置灰的按鈕中加上文案提醒，另一個是點擊置灰的按鈕后給出文案提示，但是前者似乎沒有足夠的空間進(jìn)行展示了，而后者看起來不錯……但是好像又回到了原點？（后來還討論過一些更復(fù)雜的方案，比如最后半天置灰，更早的時候隱藏等，但我們并無法判斷用戶對時間點的真實感受和期待。）

所以最終的結(jié)論就是，由于當(dāng)前的線上形式并沒有什么致命的問題，也沒有收到太多關(guān)于體驗方面的投訴，而考慮到開發(fā)成本、設(shè)計成本和迭代周期，還是選擇保持線上的樣式不變。

感覺走了一圈走回原地？在實際工作中經(jīng)常遇到這樣的情況，設(shè)計師通過本能和直覺判斷某些內(nèi)容的體驗可能不是最佳的，但經(jīng)過資料搜集、自我批判、成本評估后發(fā)現(xiàn)，似乎保持現(xiàn)狀是最好的做法。

總結(jié)：這個案例告訴我們，設(shè)計時不要總想著找茬，第一反應(yīng)往往可能漏過了諸多細(xì)節(jié)，思考清楚再做行動。

案例二

虛擬場景：對商家或商品進(jìn)行投訴之后，需要用戶選擇投訴原因，如態(tài)度不好、價格變動、缺貨等。其中，在某些特殊時間段內(nèi)，如該商品本身就是秒殺商品，用戶發(fā)起投訴時則不能選擇『缺貨』原因。

現(xiàn)狀：線上目前沒有這個功能，即所有的投訴原因都是可選的，選擇組件使用的是 picker，大概如下圖的樣式（最常見的就是選擇時間啦）。

目標(biāo)：對于『缺貨』這個投訴原因進(jìn)行交互處理，令其在特定時間段內(nèi)（商品秒殺階段）無法選擇，并給用戶相關(guān)提醒。

設(shè)計過程：

乍一看和案例一非常相似，但其實差別還是挺大的。案例一屬于設(shè)計師自 發(fā)嘗試對體驗改進(jìn)，而案例二確實明確的業(yè)務(wù)需求，需要把沒有的功能融入到現(xiàn)有方案中。拿到這個需求時，首先看到大概會涉及兩個頁面可以用來設(shè)計，分別是投 訴頁面和投訴原因選擇頁（這兩個通常不會直接在一起，但是后者有可能以彈層的形式出現(xiàn)，當(dāng)然也可能新開頁面），于是閃過幾種可能的處理方案。

方案一，在投訴頁面提前進(jìn)行文案披露，告訴用戶『缺貨』原因不可選，同時進(jìn)入原因選擇頁時將『缺貨』選項置灰；

方案二，原因選擇頁的『缺貨』按鈕正常可選，選擇后通過彈窗提醒用戶該原因不可用，并恢復(fù)默認(rèn)待選原因狀態(tài)；

方案三，僅設(shè)計原因選擇頁，在『缺貨』選項內(nèi)提供文案如『暫不可選』，并且置灰該選項。

詳細(xì)了解需求背景之后，方案三首先被排除了。原因很簡單，本身置灰就已經(jīng)表示不可選了，『暫不可選』文案所表達(dá)的內(nèi)容太少，既沒有展示出不可選的原因，也沒有告訴用戶什么時候恢復(fù)該投訴選項。同時，我們得知反饋的文案會比較長，大約有十幾個漢字，按鈕本身的空間有限，并且直接在原因字段內(nèi)拼接『暫不可選』也會有點技術(shù)成本。

方案二在流程上是順暢的，但是和案例一中提到的類似，我們一般希望用戶在操作之前就能預(yù)期到交互的結(jié)果，而不是讓可選的按鈕點擊后出現(xiàn)提醒再告訴用戶不可選。

同時考慮方案一，對于按鈕置灰有一個問題需要考慮，可以看到無線端使用的是這種滾輪式的選擇組件，其本身置灰能不能做是要打個問號的，事實上和開發(fā)溝通之后發(fā)現(xiàn)確實無法實現(xiàn)。最后，綜合考慮下，還是采用了方案二。

總結(jié)：通過案例二可以看到，設(shè)計中常常會有一個最優(yōu)解，但又總會因為技術(shù)成本、其他業(yè)務(wù)原因的影響去妥協(xié)，最后得到的方案也許不是交互上最佳的，但確實整體效率最高的。這也說明了，新人不要輕易對其他產(chǎn)品做體驗分析，因為你并沒有這些真實限制，所得出的結(jié)論也是空中樓閣。

案例三

虛擬場景：某些操作是有時效的，比如某個商品限量銷售，如果還沒有到付款的時間節(jié)點，付款功能是不可用的，那么付款按鈕能否優(yōu)化處理。

現(xiàn)狀：當(dāng)商品不在支付時間段內(nèi)，付款按鈕隱藏。

目標(biāo)：不要讓用戶找不到付款按鈕，令操作更加順暢，可見性更強(qiáng)。

設(shè)計過程：

和案例一一樣，這也是一個設(shè)計師自發(fā)想要改善體驗的過程，正好有其他業(yè)務(wù)需要對這些頁面進(jìn)行改造，能否把這個按鈕隱藏的過程優(yōu)化呢？原因相信大家都能理解，把不可用的功能藏起來，總歸不是最好的做法。

仔細(xì)查看線上的樣式我們發(fā)現(xiàn)，這個案例和案例一還不太一樣。最重要的一點是，付款的時間是有倒計時的，也就是說即便付款按鈕本身是隱藏起來的，但其附近依然有文案提醒現(xiàn)在不在支付時間內(nèi)，所以用戶不太容易迷惑。

比較簡單的解決辦法就是，把支付按鈕暴露出來，并且置灰。看來今天三個案例都和置灰杠上了。經(jīng)過交互小組和產(chǎn)品小組的討論，都一致覺得把不可用的支付按鈕置灰更加合適，并且線上已有文案提醒說明，用戶也更容易理解。

但是這個案例最后的結(jié)論有些出乎意料，首先，因為線上所有類似業(yè)務(wù)都采用了隱藏不可支付按鈕的做法，所以如果這類交易要改，其他全都要改（時間成本）；其次，這個按鈕組件在早期開發(fā)過程中，并沒有設(shè)計、開發(fā) disable 的狀態(tài)，也就是沒有置灰的樣式，如果要做，需要重新設(shè)計和開發(fā)（開發(fā)成本）；最后，線上這個隱藏的樣式已經(jīng)存在很長時間了，用戶大部分都其已經(jīng)習(xí)慣，并且沒有發(fā)生普遍的反饋表示認(rèn)知困難（用戶理解成本）。所以，結(jié)論還是保持線上的樣式。

總結(jié)：有時候設(shè)計是對的，所有人都認(rèn)可，但是依然會有各種因素前來制約。尤其在較大的產(chǎn)品團(tuán)隊，業(yè)務(wù)節(jié)奏快、需求多、上線緊，這類優(yōu)化體驗的工作常 常優(yōu)先級不夠高。與此同時，很多朋友可能會說一個按鈕而已，加一個 disable 的樣式又有何難？然而很多團(tuán)隊的流程規(guī)則導(dǎo)致業(yè)務(wù)工作是一條線，組件優(yōu)化新增樣式又是另一條線，想要一步把兩件事都做了并沒有想象中的容易。

怎么樣，簡單的三個按鈕，是不是讓你有些暈了？交互設(shè)計的難點常常就在于體驗、產(chǎn)品、開發(fā)各個內(nèi)容的協(xié)調(diào)，相互妥協(xié)，最后達(dá)到一個平衡的狀態(tài)。由小見大，小按鈕我們能應(yīng)付了，慢慢就可以面對大問題啦。