basic-elements-in-ui-design-1

控件作為組織界面最基礎的元素,相信大家都不會陌生,今天想談談這個不起眼的話題。文章從現實的控件過渡到軟件界面,再用三大輸入法的控件作為實際案例解說,全文干貨滿滿,來收!

一、現實世界的控件

“放學鈴一響,小明立刻飛奔回家,到家后一手換鞋一手開燈,隨即又躺在沙發上將風扇調至最大檔?!?/p>

開門進屋、撥動開關、調節風速……一連串動作中的門把、燈摯、旋鈕都是我們所說的控件。那控件究竟是什么呢?從字面上解釋,控件(Widgets/Controls)就是可以通過直接操作而實現控制的物件。

如果從具體的屬性出發,控件應具備以下兩個基礎特征:

–?可接觸的

–?可改變狀態的

而友好、易用的控件還應是:

–?無害的

–?不費勁的

–?有反饋的

–?愉悅的

對應諾曼提出的三個層次:

–?可接觸的+可改變狀態的——>可用的(Usable)

–?無害的+不費勁的+有反饋的——>易用的(Useful)

–?愉悅的——>吸引的(Engaged)

可接觸與無害相互依存——當還是孩子的時候我們就被教導警惕危險的信號:有毒的、尖銳的、滾燙的……使用刀具時我們都會本能地握住刀背而非刀刃,因為圓潤無害的物體更易吸引到主動的接觸。

那所謂的三個層次又是怎么回事呢?請看下面這三種卸妝油:

kj20150824 (1)

–?同樣是200ml的卸妝油,使用Muji(左)時需要將整個瓶子傾斜才能倒出(有點麻煩,但依舊是可用的);

– DHC(中)使用小泵輕輕向下擠壓即可,操作成本更低更方便(暫不考慮對擠出量的要求,相對而言更易用);

– Fancl(右)除了按壓式的抽取裝置外,還附帶一個卡住頂部的小部件——它考慮到女士攜帶卸妝油外出的場景,優雅地解決了意外溢出的問題,小小的部件讓人感到安全又貼心。

注:以上全為日本國際品牌,絕非廣告。

我們身邊還有非常多優秀的控件,比如隨處可見的汽水瓶瓶蓋:

  1. 當拿到一瓶汽水時,我們會很自然地擰動圓形的塑料瓶蓋(可接觸的+無害的);
  2. 根據過往的經驗,首次開啟需要花費更大的力氣。這種相對困難就暗示著:“這是一瓶全新的汽水,沒人喝過,可以放心飲用”(有反饋的);
  3. 為了增大摩擦力,瓶蓋外側往往印有規則的凹凸紋路(不費勁的);
  4. 順利扭開瓶蓋時,泡沫迅速上升并發出“ci——”的聲響(有反饋的+愉悅的);
  5. 最后汽水可以從瓶中倒出(可改變狀態的)。

kj20150824 (6)

整個開啟過程非常簡短,前后只是2-3秒的時間,卻能給飲用者帶來非常愉悅的體驗??蓸?、雪碧等飲料廣告最大的共同點就是:無論劇情如何變化,“開啟瓶蓋”的鏡頭一定會有!

如果你有興趣發掘更多物理控件,但一時間又無從下手,我強烈建議你去一趟IKEA:各式各樣的控件讓人看著好興奮!

二、軟件世界的控件

人是非常聰明的動物,總能通過舉一反三的方法來降低工作成本。從輸入命令行的DOS到使用圖形界面的Windows,現實世界的控件被巧妙地運用到軟件界面中。

一開始,UI設計師借助隱喻的方法,以現實的對象和操作為藍本仿造出各種圖標和控件;慢慢地,又利用軟件獨有的特性,歸納和抽象出更為直觀和高效的控件。日常生活中的『tab標簽』用于分門別類,而軟件中的『tab標簽』除了組織內容和快速索引外,還能對界面空間進行有效的擴展。

如果按功能劃分,控件可歸為以下5類:

–?觸發操作:按鈕、滾動條、手柄…

–?數據錄入:文本框、復選框、滑塊…

–?信息展示:氣球提醒、加載器、進度條、啟動頁、工具提示…

–?容器:窗口、tab標簽頁…

–?導航:面包屑、導航條、分頁器…

其中,操作類和數據錄入類有著更豐富的交互,選取幾個比較有代表性的:

1.?中規中矩輸入框

我們能輕易地聯想到輸入框的原型,因為它無論外形上還是操作上都保留著現實世界的影子:

–?填補空缺信息?vs?表單中「標簽+輸入框」的組合

–?空白處可填寫,留白空間的大小視情況而定?vs?文本框可輸入信息,根據信息的類型選用不同的寬度(比如輸入年齡、網址、代碼等)

–?下筆前將筆尖挪到空位處?vs?點擊文本框,光標在起始位置閃爍

–?內容過多時溢出?vs?輸入信息超出寬度時自動縮進

kj20150824 (8)

軟件界面設計很奇妙的一點是工作模型不必受物理上的限制,然后輸入框還能這樣玩:

–?未填寫時:框內用顏色飽和度較低的文字/圖標提示程序期待的內容;

–?鼠標滑過時:指針變成光標,暗示可進行輸入操作;

–?鼠標聚焦時:邊框高亮;提示信息被清除;光標閃爍;

–?輸入內容:邊框持續高亮;密碼非明文顯示;實時反饋密碼安全等級、有效性;

–?輸入完成:高亮消失;輸入內容的顏色飽和度高,可快速區分未填和已填。

另外輸入框內的信息還可按需選擇不同的對齊方式;在右側安排「×」圖標用于內容的快速清除;還能根據用戶輸入的關鍵詞實時聯想……

2.?抽象好用復選框

單選按鈕和復選框都無法在真實生活中找到對應的原型。它們不是一目了然的組件,都必須經過學習;同時又非常容易學習,一旦使用過就不會忘記,是利用“習慣用法”設計的典型例子:

– 5個基本狀態:未選(可用)、選中(可用)、未選(禁用)、選中(禁用)、聚焦

– 2個方向:復選框常以多個組合出現,其排布方式有:

縱向:適用于選項內容較多或信息長度差異較大的情況;

優點:嚴格對齊,布局美觀;勾選多個時鼠標移動距離短;

缺點:占用較多空間,把表單拉長。

橫向:適用于選項數量多且內容簡短的情況;

優點是占位少,缺點是選項間距離較遠,同時需要考慮一些細節問題:

a.?如果單個選項的寬度固定,超出的信息如何展示?

b.?如果不固定,如何避免布局混亂?

kj20150824 (9)

–?交互:

小小的方形對指針瞄準的精確度要求較高。為了方便操作,將選框和文字綁定以擴大點擊區域,同時從視覺上給用戶提供預期:例如當鼠標滑過時,將兩者作為整體進行反饋。

另外,當用戶選擇多個時,有什么辦法能減少點擊、快速選中多個呢?在windows中「框選」可一次性選中多個文件;在photoshop中按住鼠標左鍵不放并滑動可快速隱藏多個圖層。

3.?褒貶不一開關鍵

前面兩個控件在ui界的重要地位毋庸置疑,與它們相比,開關鍵爭議不少。

Apple Watch 交互指南中對開關的描述是:

定義:代表兩種互斥的選擇或狀態

特征:

1.?指示二元狀態

2.?通常包含標簽

適用于:讓用戶在兩個選項中選擇的其中一項,比如on/off,yes/no

我第一次接觸開關是在移動應用的界面上,有非常長的一段時間都很困惑:這究竟是狀態還是操作?

這個困惑跟手機輸入法早期的「中英文切換」有點類似:當使用全鍵盤時,我一直無法判斷將要輸入的語言。切換按鈕上“英文”的意思是:

a.?“好啦,現在開始輸入英文?!??????????抑或??????????b.?“想換成英文輸入法請點我!”

很多次發送信息時,快速按下多個字母后才反應過來當前是英文狀態。然后不得不逐個地刪除鍵入的內容,切換為中文再很沮喪地重新輸入一遍。后來很多廠商都對此進行了優化:

–?搜狗:切換語言時有toast提示狀態,切換按鈕改成【/中】的樣式,突出當前語言,弱化點擊操作后的語言;

-百度:在空格鍵處顯示當前輸入方式「百度拼音」,點擊左側的【ABC】可切換成英文,切換后按鈕文案變成【返回】;

-谷歌:舊版使用標簽頁切換中英文,新版點擊「地球」圖標可以直接切換到原生英文輸入法,取消了中英文切換按鈕。

kj20150824 (10)

總的來說,要指示二元狀態開關鍵是個不錯的選擇(優于單個checkbox),但使用時必須明確地區分“狀態”與“操作”,我總結了比較關鍵的兩點:

1.?規范標簽文案。動詞、形容詞的屬性應做到一目了然,比如使用「打開」和「已開啟」,而不是既用「開啟」表動作,又用「開啟」表狀態;

2.?使用合適的心理模型。說到這里不得不提粵語中某些字詞的妙用:需要消耗能源的對象的停止運作廣府人通常稱為「熄」,比如「熄電話」、「熄電腦」、「停車熄匙」……「熄」是一個可視化的文字,使聽者仿佛看到了這樣的畫面——摁下按鈕后電腦開始退出進程,直至最后屏幕變黑了、指示燈也滅了。Macbook鍵盤上CapsLock鍵的設計也跟「熄」的心理模型不謀而合,目前很多開關鍵的視覺設計都使用了類似的隱喻。

雖然開關鍵已被廣泛地運用到了軟件界面中,但據我了解還是有相當一部分人有使用障礙,你是怎么看的呢?

三、繼續深入控件

界面設計從業者都有必要花時間了解圖形界面誕生的歷史,以及被用戶熟練使用的控件在不同版本的變化。在我們公司,每位新來的設計師都需要完成一個任務:臨摹不同平臺的核心控件。

或許你會說:Axure、Sketch 自帶的控件已經非常豐富了為什么還要重復做?這不是自討苦吃嗎?

確實,主流的原型制作軟件已覆蓋到大部分常用的控件,一拖一放即可,輕松簡便。但也正是太輕松,太信手拈來,以致在很多設計師眼里控件就是這么理所當然。常說交互設計師應認真閱讀不同平臺的交互指南,但又有多少人讀過譯文或“精華版”就上陣設計了?

有沒有想過Android的Navigation Bar菜單為什么要放在邊界處?是費茨定理的應用嗎?為什么是左側而不是右側?喚出菜單的操作方式、過渡的顏色變化、跳轉的動畫細節又是基于什么考慮?在臨摹的過程中仔細推敲,品味控件的視覺層次結構和隱含的認知心理學,思考為何它能被廣泛應用?為何能得到用戶認可?是否還有不盡人意的地方?(從4.x 到Material Design設計規范都在不斷地調整)

我司開發的是面向企業客戶的互聯網營銷工具,需要實時監測和量化全流程營銷中每個節點的效果。在數據報表占據屏幕大部分空間的情況下,還要保證運營人員/優化師能便捷且快速地使用豐富的功能來進行數據分析。這就要求設計師對海量功能進行合理整合,并在非常有限的空間內組織布局。產品中再細小的元素都經過深思熟慮,每個模塊都經過謹慎安排,真正做到聚焦最核心的用戶場景。

在系統中新建RTB廣告活動可以從多個維度精準定向人群,下面是地域定向投放的原型方案之一,其中混合了7種基礎控件:

kj20150824 (7)

1,列表

–?利用斑馬行分組,使用戶不會混淆行與行之間的數據(格式塔的相似性與封閉性原理);

–?點擊首列被加粗的選項,可快速選中組內的多個省市;

–?右側的省份利用對齊和留白代替豎線進行分隔。

2,下拉菜單:曾想過使用開關鍵來表示包含/排除,但最終決定選擇下拉菜單。除了因為開關操作模棱兩可,還考慮到以后會增加更多規則,下拉菜單更利于擴展。

3,搜索:輸入關鍵詞、按下Enter鍵后進入搜索狀態(圖略)

4,標簽欄

–?標簽間增加“或”的文案,消除“多選一”的歧義;
–?旗下選項有被勾選時,在標簽右上方標明選中的個數。

5,文字按鈕:提供城市等級、反選、清空的快捷選項

6,復選框

–?區分三種狀態:未選、部分選中、全選,部分選中在右側說明占比;
–?有細分城市和地區的省份使用不同的顏色區分,暗示用戶有二級菜單。

7,嵌入彈層:鼠標滑過選項時顯示

其他方案還包括:樹表+字母索引、雙面板選擇視圖……這類 to b 的產品有著既定的業務邏輯和相對復雜的信息架構,設計過程中不能隨意地做減法??菰锏呐R摹訓練是一個磨刀的過程,但磨刀不誤砍柴工,設計師只有對控件有了深刻理解才能對其進行不斷的加工和優化,進而設計出能滿足業務需求的復雜控件。

四、寫到最后

『 Designing Interface 』一書收錄了大量的界面設計模式,交互設計圈估計是人手一本了,作者? Jenifer Tidwell在書中把「控件」比喻成「設計詞匯量」,他說道:

擴大詞匯量有助于提高你在某種語言上的表達能力,擴大「設計詞匯量」可以幫助你更好地進行設計。但要記住,界面設計真正的藝術在于:解決正確的問題。

我們在學生時代都背過不少成語和詩句,期待著能運用到寫作中增加「閃光點」;但我們也知道有一類低分作文叫「堆砌辭藻、言而無物」。界面設計也如此,熟讀「控件字典」只意味著可以靈活調用合適的控件拼湊表單,終究不能做出深入人心的設計。

試想一下,當用戶與機器交互的媒介不再是鍵盤和鼠標;當用戶只能通過編碼來進行數據交換;甚至連屏幕都沒有(比如10086的語音菜單)……那設計師該怎么做?

讓我們都回歸到設計的本質吧。

(如果你也熱衷于為復雜的問題尋找簡單優雅的解決方案,BiddingX設計團隊需要你:kityee@sunteng.com)

【PS頭像方法大全】

萌系個人頭像教程:
《萌系PS教程!手把手教你打造Q版的個人頭像》
《萌系PS教程!手把手教你打造Q版的個人頭像(二)》

卡通個人頭像教程:
《PS中級教程!教你繪制個人專屬的可愛卡通頭像》

投稿者:yee

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量100萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 3

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
相關推薦
2 收藏