首頁

交互的未來標(biāo)配!5個(gè)方法幫你設(shè)計(jì)好用的觸控手勢

周周

5-useful-touch-gesture-method-1

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

優(yōu)秀的交互設(shè)計(jì)師是怎樣煉成的?

用心設(shè)計(jì)

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

優(yōu)秀的交互設(shè)計(jì)師是怎樣煉成的?

從交互設(shè)計(jì)角度,聊聊WEB網(wǎng)站和移動(dòng)APP的六大差異

用心設(shè)計(jì)

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

Google UX 設(shè)計(jì)師上課:搶占行動(dòng)商務(wù)大餅,App 就該越「笨」越好!

用心設(shè)計(jì)


 

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

簡介:Medium、Flipboard、Airbnb、YouTube 都做得很好,因?yàn)樗麄冇幸粋€(gè)共通點(diǎn)就是「直接用內(nèi)容代替主畫面,開門見山就提供用戶可能感興趣的內(nèi)容來吸引他點(diǎn)擊」;除此之外,Stephen 強(qiáng)調(diào)這些內(nèi)容最好也可以無盡的刷下去, ...

113315mmnpp9n1frjjnp9r.jpg


行動(dòng)唯一、行動(dòng)唯一、行動(dòng)唯一!

今年五月底 Google I/O 大會(huì)上,我們可以聽到 Google 一再重複這個(gè)概念「行動(dòng)唯一」。無獨(dú)有偶,整個(gè)臺(tái)灣市場也在今年掀起一股手上商城的風(fēng)潮,以幫店家打造行動(dòng)應(yīng)用聞名的 91 App 更是因此在今年獲投 900 萬美金 A 輪融資;而被全球知名創(chuàng)投 500 Startups 投資的 SHOPLINE 也推出類似服務(wù),更是在今年開始進(jìn)軍臺(tái)灣、開拓國際市場 。

常識(shí)小科普!12個(gè)常見的網(wǎng)站交互設(shè)計(jì)錯(cuò)誤

用心設(shè)計(jì)

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

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

interaction-design-mistakes-01

交互小技巧!淺聊四個(gè)主流的頁面間跳轉(zhuǎn)動(dòng)效

周周

website-redirection-interaction-animation-1

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

UI設(shè)計(jì)師應(yīng)掌握的知識(shí)體系以及職業(yè)規(guī)劃!

用心設(shè)計(jì)

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

那么到底什么是UI設(shè)計(jì)?

做UI設(shè)計(jì)需要掌握哪些知識(shí)體系?

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

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

是很多新人常會(huì)遇到的問題!

針對(duì)這些問題,給大家一個(gè)比較全面的解釋,希望能幫到新入行移動(dòng)設(shè)計(jì)的人!

減少返工!如何發(fā)現(xiàn)交互設(shè)計(jì)中的思維盲區(qū)?

周周

interactive-design-blind-area-1

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

交互案例實(shí)戰(zhàn)!三個(gè)按鈕背后由小見大的交互思考

用心設(shè)計(jì)

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

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

來源:莫貝網(wǎng)

初入交互設(shè)計(jì)工 作,最常見的需求就是——放按鈕。放按鈕看起來是超級(jí)簡單的事,無非就是設(shè)計(jì)按鈕的樣式、擺放按鈕的位置、確定按鈕的狀態(tài)與反饋等,但殊不知其『麻雀雖 小,五臟俱全』,小小的按鈕設(shè)計(jì)中也蘊(yùn)含了很多交互設(shè)計(jì)的思維,當(dāng)然除了設(shè)計(jì)本身之外,還能看到如何平衡開發(fā)、產(chǎn)品以及用戶各方的需求。

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

案例一

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

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

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

設(shè)計(jì)過程:

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

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

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

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

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

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

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

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

案例二

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

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

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

設(shè)計(jì)過程:

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

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

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

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

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

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

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

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

案例三

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

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

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

設(shè)計(jì)過程:

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

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

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

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

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

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

如何發(fā)現(xiàn)移動(dòng)端交互設(shè)計(jì)中的思維盲區(qū)?

用心設(shè)計(jì)

當(dāng)某個(gè)功能對(duì)數(shù)量有限制時(shí),操作的時(shí)機(jī)就變得很重要。以在app上報(bào)名班級(jí)(圖1)的操作為例,假設(shè)班級(jí)容量為20人,確認(rèn)報(bào)名訂單時(shí)暫
時(shí)扣去一個(gè)名額庫存,完成支付時(shí)完全扣去這個(gè)名額。如果當(dāng)你報(bào)名班級(jí)時(shí),名額已滿,但還有人未付款,這時(shí)系統(tǒng)應(yīng)該有什么提示?這和報(bào)名班級(jí)時(shí),班級(jí)絕對(duì)性
滿員(名額已滿,且所有人完成付款)的情況處理方式是不一樣的。另一種情況是,在你進(jìn)入確認(rèn)訂單頁時(shí),名額未滿,但當(dāng)你按下“確認(rèn)”訂單,此時(shí)名額已經(jīng)滿
了,也應(yīng)該有相應(yīng)的提示。像這種對(duì)數(shù)量敏感的功能,應(yīng)盡量明確地告訴用戶限制條件,當(dāng)前的相關(guān)狀態(tài)是怎樣的(未滿員,暫時(shí)滿員,或已滿員?),防止用戶進(jìn)
行不必要的操作。用戶若第一時(shí)間沒有理解,可能需要進(jìn)一步友好地提示。

如何發(fā)現(xiàn)交互設(shè)計(jì)中的思維盲區(qū)

日歷

鏈接

個(gè)人資料

存檔