在用戶界面設計中,按鈕和鏈接文字應該表示狀態還是表示動作?


首先,按鈕存在本身就是一種狀態,通常一個按鈕被稱作表示動作按鈕其實是因為它只有一個狀態,點擊以後就進入另一個界面、這個按鈕不再存在。這樣的按鈕比如「確認」按鈕,即便有的按鈕在滑鼠懸停的時候會改變視覺或聲音效果,它也是一個單態/動作按鈕。

經常給設計造成困擾的是兩態/切換按鈕(toggle button)的歧義性,典型的比如「開/關」按鈕。這樣的按鈕需要表現當前狀態、同時預示點擊以後的結果,在按鈕所連接的功能本身需要解釋、 空間有限、或者跨語言環境下,並不容易。你可以看到iPhone中用圖形、文字、顏色、提示信息等多種方法共同作用才能達到效果,並且即使這樣也不是所有用戶一見到就會用、常常有用戶要嘗試一下、通過看到結果的提示信息才能確定。在滑鼠電腦時代,也有的做法是默認顯示當前狀態、滑鼠懸停時預示點擊結果,當然這種做法的效果也有限,並且在觸屏電腦的時代也無法繼續。像Benjamin舉的播放、暫停按鈕的例子,因為邏輯清晰、圖標直觀易懂,才逐漸成為約定俗成的標準。而通常的兩態/切換按鈕並沒有一個統一的設計原則,而是根據自身的環境情況選取:1)(在當前狀態很清楚的情況下)直接顯示預示結果,比如播放/暫停按鈕;2)直接顯示當前狀態,點擊切換為另一狀態,比如Android上控制的Wifi鏈接的widget。無論選取哪一個設計原則,都會盡量保證在產品及其生態系統中遵循同一個設計原則
另外值得注意的是,時態、語態豐富的英文在表示狀態上比中文往往有明顯的優勢,比如在按鈕上顯示「On」、「Turn on」表示了兩個完全相反的狀態,翻譯成中文則可能都變成了「打開」。

還有更複雜的多態按鈕,比如電視、顯示器上的硬體按鈕,按下按鈕之後會出現選項輪換的結果。但是這種複雜操作的歧義性很小,反而不容易造成困擾。

另外,在網路產品中,一些以往用按鈕表現的功能正在被鏈接的形式取代,鏈接已經不僅僅表示頁面跳轉。不論這種變化在邏輯上是否合理,但是這種變化的趨勢已經不可阻擋。鏈接既可以用做單態/動作按鈕、又可以用做 兩態/切換按鈕,但如果同時使用按鈕和鏈接的形式,通常用按鈕表現更重要的功能、用鏈接表現次要的功能。

P.S. 花滿樓 分享的文章寫的很好,建議大家去看:http://www.aliued.cn/2010/11/07/expression-of-state-and-action-in-ui-design.html


如果我們從按鈕的作用出發,問題或許會比較清晰。

按鈕的作用是迅速讓用戶發起行為。那麼跟用戶行為更緊密相關的話,應該是接下來會產生的動作。因此,通常我們看到的按鈕,都是表示動作——給予用戶預期。你點下去之後,究竟會發生什麼。這點應該沒有什麼異議。

但題主問題的重點在於,我們經常也會碰到一些按鈕,表示的是狀態。比如以下幾種:

這些按鈕展示的樣例很像生活中的一些場景。比如下雨關窗。整個行為大概是:你發現下雨了。如果家裡窗戶沒關,那你得關掉它,以免雨水淋到你窗檯。

因此,表示狀態的按鈕,通常有兩個特徵:

  • 狀態是用戶是否發起行為的前提,首要關注的信息。
  • 狀態也可以暗示出按鈕點下去的動作。

窗戶的狀態(開與關)是首先需要確定的,窗戶關也暗示著窗戶也是可打開。

所以,按鈕主要展示的是狀態,那麼需要滿足兩個條件:狀態是用戶決定行為的前提,狀態可暗示點下去的動作。

比如,下面的例子便不太適合使用狀態展示。

比如當前的模式的確是用戶更改模式首先關注的,但此狀態完全可在標題欄等其他地方來展示。另外用戶不能清楚清楚清爽模式的對立面是?複雜模式?標準模式?夜間模式?

我們可以改良這種設計。比如狀態的用標題欄來承載,按鈕預示行為:

或者狀態按鈕更好地預示行為:

因此,如果你想使用狀態按鈕,就必須考慮,狀態是否是必要展示的?狀態是否可以暗示下一步的行為?(通常當前狀態只有一個對立狀態,事情會變得簡單)在播放器界面,即使用戶需根據狀態來決定下一步的行為,但當前的狀態有進度條、唱片的滾動、是否有聲音來展示,所以按鈕不需要展示狀態,而表示的是下一步的行為(暫停或播放)。


按鈕目的是觸發動作,所以當然是用來表示動作合適。
比如所有的音樂播放軟體都是如此:||表示「暫停」這個動作,也同時表明目前是在播放狀態;?表示「播放」這個動作,也同時表明目前是在停止狀態。


按扭是一個動作,並且可以通過他的大小,顏色,形態來表示不同狀態
鏈接是一個通道,或者說一個門,引導你進入到另一個頁面


按鈕的呈現以狀態為主
儘可能只用狀態就讓用戶明白可執行的動作——比如「開關」(無論是雙態、三態還是多態)在某個狀態時的動作必然是改變此狀態使之成為其他狀態的動作

只有無法用狀態明示的動作,才用文字標識


按鈕上的字應表示動作,指按下後會產生的效果


我是外行,我認為按鈕應該是狀態,想想按鈕在什麼地方?用戶界面啊,那是給用戶的界面,不是給技術的,界面上的操作按鈕一定要非常清楚的表示當前的狀態,否則怎麼吸引傻瓜來界面?
可以讓用戶象傻子一樣的被界面指引,被操作的話,這樣的界面還不夠牛?
別從技術思考,服務才是王道,也別指望用戶都通曉技術。
得了30幾票的回答者@uxworks,你的回答很是叫人頭暈


在設計者角度;它都是狀態,執行A下一步是什麼?當A改變此時A是什麼?....

在使用者角度;它都是動作,點/按下A會發生什麼?點/按下A會打開什麼?.....


都可以吧。
這個問題挺奇怪的,可能是個人知識不足,也可能是不太習慣題主這樣的表達方式,但是第一次受邀,還是私下揣測下吧。
首先,要明確一點:按鈕和鏈接是幹嘛的。題主問的是按鈕和鏈接,而不是Label,有過一些經驗之後不難得出結論:它們都會引發某種動作。至於題主說的」表示動作「是啥意思真心不明白。
但是我們現在不難發現,在我們日常使用的眾多軟體和網站的用戶界面中,按鈕和鏈接不僅用來引發動作,它們本身也是變化的,這種變化主要是根據當前所處的位置和操作步驟更改顏色或者文字內容,可能就是題主所說的」表示狀態「吧。這樣的變化在精心設置的情況下能起到改善用戶體驗的作用,比如說通過改變顏色用戶可以知道按鈕和鏈接是否可用,通過改變文字可以知道點擊後會引發什麼樣的操作,總之,將某些信息提前通過其狀態告訴用戶,應該算是《交互設計之路》裡面的」前饋「的應用了。
感覺題主的提問理解起來不容易,不妨考慮仔細思考下文字內容,增加點背景介紹,順便幾個例子,這樣的效果應該更好一些。


1.只需要保持行為一致即可,這個統一的單位最小是指同一個界面,再往上同一個應用,然後同一個系統,同一個界面與應用上絕對要保持統一,在同一個系統內盡量保持一致(針對不同的情況可以允許有特例)。
2.不管表狀態還是表動作,原則都是不能夠讓用戶產生「這到底是表狀態還是表動作的疑惑」,上面所說的一致性也體現了這個原則——如果同一個界面,應用或者系統內都是同一種行為,用戶就不會有這種疑惑。
3.具體設計中,如果當前的狀態可以通過按鈕外的元素清楚的表達給用戶,則可以考慮將按鈕表達成「動作」,參見各種播放器的例子;如果當前的狀態還不能清楚的表達給用戶,則需要考慮將按鈕本身表達成狀態,參見各種開關的例子(wifi,藍牙...)
暫時想到這麼多


不管是動作還是狀態都可以,但是一定要全局統一。


無論是狀態,還是動作,在設計中都不是非要固定格式的,取決於你的產品目的,和產品實際要解決的問題,你是要解決功能問題還是性能問題還是美觀問題呢?
不多說,打開iPhone的「設置」,隨便進一個菜單,觀察左上角,在iOS6和iOS7中是不同的。

以下引用CDC博客的一篇文章里的說明:
當目的不同時,適用的設計解決方案是不同的,也無法認定一種風格是優於另一種風格的。在有針對性的設計中,設計要解決的問題是最重要的,至於採用哪種視覺語言,應當首先取決於產品要達到的目的,而非時下流行的設計風格。以iOS6和iOS7的「返回」為例——
顯然,每一種設計風格都是有局限性的。當目的不同時,適用的設計解決方案是不同的,也無法認定一種風格是優於另一種風格的。在有針對性的設計中,設計要解決的問題是最重要的,至於採用哪種視覺語言,應當首先取決於產品要達到的目的,而非時下流行的設計風格。以iOS6和iOS7的「返回」為例——

  iOS6的返回在視覺上更像一個「按」鈕,通過使用更接近真實物理世界觀的陰影、高光和漸變對返回操作區域進行闡釋,給予人一種可以點觸的視覺觀感。這一設計所帶來的好處是,通過具有強烈操作暗示(局部範圍的點觸感)和方向暗示(箭頭造型和被箭頭包裹的文字)的擬物手法,降低使用者的學習成本,並提升使用者對操作結果預判的準確度。這種設計手段在iPhone尚未淪為街機的那些年頭是非常有價值的,能夠以友好的姿態,使具備任何認知程度的使用者都能快速上手,有利於發展iOS的用戶群體。iOS7的返回,則通過扁平化的處理,在視覺上擺脫了「按」這一動作隱喻,並主要強調一種與整個屏幕更加一體化的方向感。這種改變並非僅僅為了服從整體設計風格的變化,而更多可以解讀為一種適應產品現狀的進化——
  1、從普通屏到retina屏的升級,使原先擬物化的設計需要佔用更多的系統資源。屏幕的增大意味著切圖尺寸的增加,切圖尺寸的增加勢必帶來佔用系統空間的增長。而在特定尺寸下,需要大量視覺細節的擬物化設計必然會使用到更多的顏色,從而使切圖的數據量成倍增加。這一點在屏幕尺寸分化中所帶來的影響是極為嚴重的。而由於扁平化的設計對細節元素的使用更為克制,能夠較好地解決在不同解析度下的適配問題,而不需要耗費太多的資源(包括系統資源和人力投入資源)。如下圖所模擬的結果,iOS6按鈕切圖的數據量在三種尺寸下成倍增加,而iOS7按鈕切圖的數據量增加並不多。

  2、從3.5英寸屏幕到4英寸屏幕的升級,使得手指完成屏幕左上角點觸操作所需的路徑增長。同時,在iOS6的返回按鈕設計上,實際的點觸響應區域要大於視覺限定的區域,手指即使未能精確點觸到視覺上的按鈕區域,也會觸發返回的動作。

  結合這兩點考慮,顯然在大屏幕上,有明確觸控範圍的點觸樣式不再是一個理想的視覺展現形式,過於強調點觸區域的精確度會在一定程度上增加用戶心理上的疲勞感。反之,iOS7的返回則規避了這一問題,對點觸區域的模糊化處理在一定程度上釋放了用戶的操作壓力。

  3、iOS7對手勢操作和頭部感應操作的支持,可以讓返回操作不再像iOS6一樣只能依賴於點觸動作。這一點使得強調點觸行為的按鈕樣式失去了存在的價值,取而代之的是在表現方向感上更加純粹的扁平化設計。

  可見,iOS7的「返回」並非因為要拋棄擬物主義才成為現在的樣子,而是使用這種更扁平的設計手法切實解決了產品的實際問題。這一點可以用Jonathan Ive曾說過的一段話加以印證——

  If we』re thinking about a lunchbox, we』d be really careful about not having the word box already, to give you a bunch of ideas that could be quite narrow. Because you think of a box as being square and like a cube. So we』re quite careful with the words that you use, because those can be narrow and can determine the path that you go down.

  大意是:如果要設計一個lunchbox,最好先把「box」這個字眼拋開,因為」box」這個字眼會決定你接下來的思路,將你的想像力限定在某種立方體造型上。(注: a box is a square or rectangular container with hard or stiff sides.)

  因此,在做設計的時候,要先放空自己對事物的既有認知,再從根本上去考慮最適合的設計形式。這便是一種從設計的原本目的出發,拋棄一切外在影響,針對產品本身給出解決方案的設計方法。


我也一直被這個問題困擾,我們沒有辦法給每個用戶都去解釋這個按鈕究竟是表示動作,還是狀態。個人觀點:對於大多數對互聯網操作不夠熟悉的人來說,還是把狀態和操作都列出來最好。例如:

狀態 操作

已隱藏 點擊顯示

雖然這樣做比較麻煩,會造成信息的冗餘,但與給用戶造成困擾,使用戶搞不清楚該如何操作相比,這樣做還是有一定的可取性。


什麼都可以,但要有明顯響應 反饋給用戶。


前來學習的。。
分享一個以前看到的博客吧。。感覺說的還不錯。。
http://www.aliued.cn/2010/11/07/expression-of-state-and-action-in-ui-design.html


應該都是動作的,因為起存在意義的是其觸發事件的作用,很多腳本語言都是這麼定義的吧?


動作 、


沒有絕對的是狀態還是動作之說,看按鈕所處的使用情景如何。
若用戶對按鈕所處的是陳述性情景為主,那會以描述性為主。
若用戶對按鈕所處的是程序性情景為主,那會以過程性,所謂動作為主。如時間流,任務流等。
若指圖標設計的話,不管狀態還是動作,只要用戶能最快理解傳達的意識就好了,當然還要符合美學。


可以同時表示狀態和動作啊
button本身的目的是為了讓用戶意識到,這個東西可以點擊,通過context和button上的content來提示操作後會導致什麼結果。

如果需要的話可以在button上設計動態的變化表示狀態,button本身的狀態變化:hover on, pressed,等等,點擊後的狀態可以顯示一些其他的狀態,比如一個create的按鈕,點擊後content可能會變成一個轉圈的loading圖標+loading,提示用戶等待。又比如save button,點擊後可以改變為saved+check mark,就變成顯示「已保存」的狀態了。

ps不是很懂題主問這問題的目的,以及想解決什麼問題。歸根結底設計是用來更好地解決問題,而不是創造問題的。


按鈕表示動作,關鍵的是狀態在按鈕上或者其他地方也要展示
舉個簡單的例子,電燈開關按下開燈,再按下關燈,按開關是動作,在動作的同時燈的點亮和熄滅表示對應的結果狀態


推薦閱讀:

UI設計師專業的筆記本電腦有哪些推薦?
為什麼進度條大多使用藍色?
在視覺設計能力不足的情況下,如何為一款移動APP製作或者選擇一款UI?
怎麼理解ps的外發光面板里的「擴展」和「範圍」這兩個概念呢?
為什麼最近的用戶界面設計風格趨勢開始流行淡雅的低飽和度顏色?

TAG:交互設計 | 用戶界面設計 | 視覺設計 | 用戶體驗設計 |