中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

控件作為組織界面最基礎(chǔ)的元素，相信大家都不會(huì)陌生，今天想談?wù)勥@個(gè)不起眼的話題。文章從現(xiàn)實(shí)的控件過渡到軟件界面，再用三大輸入法的控件作為實(shí)際案例解說，全文干貨滿滿，來收！

一、現(xiàn)實(shí)世界的控件

“放學(xué)鈴一響，小明立刻飛奔回家，到家后一手換鞋一手開燈，隨即又躺在沙發(fā)上將風(fēng)扇調(diào)至最大檔。”

開門進(jìn)屋、撥動(dòng)開關(guān)、調(diào)節(jié)風(fēng)速……一連串動(dòng)作中的門把、燈摯、旋鈕都是我們所說的控件。那控件究竟是什么呢？從字面上解釋，控件（Widgets/Controls）就是可以通過直接操作而實(shí)現(xiàn)控制的物件。

如果從具體的屬性出發(fā)，控件應(yīng)具備以下兩個(gè)基礎(chǔ)特征：

–?可接觸的

–?可改變狀態(tài)的

而友好、易用的控件還應(yīng)是：

–?無害的

–?不費(fèi)勁的

–?有反饋的

–?愉悅的

對(duì)應(yīng)諾曼提出的三個(gè)層次：

–?可接觸的+可改變狀態(tài)的——>可用的（Usable）

–?無害的+不費(fèi)勁的+有反饋的——>易用的（Useful）

–?愉悅的——>吸引的（Engaged）

可接觸與無害相互依存——當(dāng)還是孩子的時(shí)候我們就被教導(dǎo)警惕危險(xiǎn)的信號(hào)：有毒的、尖銳的、滾燙的……使用刀具時(shí)我們都會(huì)本能地握住刀背而非刀刃，因?yàn)閳A潤(rùn)無害的物體更易吸引到主動(dòng)的接觸。

那所謂的三個(gè)層次又是怎么回事呢？請(qǐng)看下面這三種卸妝油：

–?同樣是200ml的卸妝油，使用Muji（左）時(shí)需要將整個(gè)瓶子傾斜才能倒出（有點(diǎn)麻煩，但依舊是可用的）；

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

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

注：以上全為日本國(guó)際品牌，絕非廣告。

我們身邊還有非常多優(yōu)秀的控件，比如隨處可見的汽水瓶瓶蓋：

1. 當(dāng)拿到一瓶汽水時(shí)，我們會(huì)很自然地?cái)Q動(dòng)圓形的塑料瓶蓋（可接觸的+無害的）；
2. 根據(jù)過往的經(jīng)驗(yàn)，首次開啟需要花費(fèi)更大的力氣。這種相對(duì)困難就暗示著：“這是一瓶全新的汽水，沒人喝過，可以放心飲用”（有反饋的）；
3. 為了增大摩擦力，瓶蓋外側(cè)往往印有規(guī)則的凹凸紋路（不費(fèi)勁的）；
4. 順利扭開瓶蓋時(shí)，泡沫迅速上升并發(fā)出“ci——”的聲響（有反饋的+愉悅的）；
5. 最后汽水可以從瓶中倒出（可改變狀態(tài)的）。

整個(gè)開啟過程非常簡(jiǎn)短，前后只是2-3秒的時(shí)間，卻能給飲用者帶來非常愉悅的體驗(yàn)?？蓸?、雪碧等飲料廣告最大的共同點(diǎn)就是：無論劇情如何變化，“開啟瓶蓋”的鏡頭一定會(huì)有！

如果你有興趣發(fā)掘更多物理控件，但一時(shí)間又無從下手，我強(qiáng)烈建議你去一趟IKEA：各式各樣的控件讓人看著好興奮！

二、軟件世界的控件

人是非常聰明的動(dòng)物，總能通過舉一反三的方法來降低工作成本。從輸入命令行的DOS到使用圖形界面的Windows，現(xiàn)實(shí)世界的控件被巧妙地運(yùn)用到軟件界面中。

一開始，UI設(shè)計(jì)師借助隱喻的方法，以現(xiàn)實(shí)的對(duì)象和操作為藍(lán)本仿造出各種圖標(biāo)和控件；慢慢地，又利用軟件獨(dú)有的特性，歸納和抽象出更為直觀和高效的 控件。日常生活中的『tab標(biāo)簽』用于分門別類，而軟件中的『tab標(biāo)簽』除了組織內(nèi)容和快速索引外，還能對(duì)界面空間進(jìn)行有效的擴(kuò)展。

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

–?觸發(fā)操作：按鈕、滾動(dòng)條、手柄…

–?數(shù)據(jù)錄入：文本框、復(fù)選框、滑塊…

–?信息展示：氣球提醒、加載器、進(jìn)度條、啟動(dòng)頁、工具提示…

–?容器：窗口、tab標(biāo)簽頁…

–?導(dǎo)航：面包屑、導(dǎo)航條、分頁器…

其中，操作類和數(shù)據(jù)錄入類有著更豐富的交互，選取幾個(gè)比較有代表性的：

1.?中規(guī)中矩輸入框

我們能輕易地聯(lián)想到輸入框的原型，因?yàn)樗鼰o論外形上還是操作上都保留著現(xiàn)實(shí)世界的影子：

–?填補(bǔ)空缺信息?vs?表單中「標(biāo)簽+輸入框」的組合

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

–?下筆前將筆尖挪到空位處?vs?點(diǎn)擊文本框，光標(biāo)在起始位置閃爍

–?內(nèi)容過多時(shí)溢出?vs?輸入信息超出寬度時(shí)自動(dòng)縮進(jìn)

軟件界面設(shè)計(jì)很奇妙的一點(diǎn)是工作模型不必受物理上的限制，然后輸入框還能這樣玩：

–?未填寫時(shí)：框內(nèi)用顏色飽和度較低的文字/圖標(biāo)提示程序期待的內(nèi)容；

–?鼠標(biāo)滑過時(shí)：指針變成光標(biāo)，暗示可進(jìn)行輸入操作；

–?鼠標(biāo)聚焦時(shí)：邊框高亮；提示信息被清除；光標(biāo)閃爍；

–?輸入內(nèi)容：邊框持續(xù)高亮；密碼非明文顯示；實(shí)時(shí)反饋密碼安全等級(jí)、有效性；

–?輸入完成：高亮消失；輸入內(nèi)容的顏色飽和度高，可快速區(qū)分未填和已填。

另外輸入框內(nèi)的信息還可按需選擇不同的對(duì)齊方式；在右側(cè)安排「×」圖標(biāo)用于內(nèi)容的快速清除；還能根據(jù)用戶輸入的關(guān)鍵詞實(shí)時(shí)聯(lián)想……

2.?抽象好用復(fù)選框

單選按鈕和復(fù)選框都無法在真實(shí)生活中找到對(duì)應(yīng)的原型。它們不是一目了然的組件，都必須經(jīng)過學(xué)習(xí)；同時(shí)又非常容易學(xué)習(xí)，一旦使用過就不會(huì)忘記，是利用“習(xí)慣用法”設(shè)計(jì)的典型例子：

– 5個(gè)基本狀態(tài)：未選（可用）、選中（可用）、未選（禁用）、選中（禁用）、聚焦

– 2個(gè)方向：復(fù)選框常以多個(gè)組合出現(xiàn)，其排布方式有：

縱向：適用于選項(xiàng)內(nèi)容較多或信息長(zhǎng)度差異較大的情況；

優(yōu)點(diǎn)：嚴(yán)格對(duì)齊，布局美觀；勾選多個(gè)時(shí)鼠標(biāo)移動(dòng)距離短；

缺點(diǎn)：占用較多空間，把表單拉長(zhǎng)。

橫向：適用于選項(xiàng)數(shù)量多且內(nèi)容簡(jiǎn)短的情況；

優(yōu)點(diǎn)是占位少，缺點(diǎn)是選項(xiàng)間距離較遠(yuǎn)，同時(shí)需要考慮一些細(xì)節(jié)問題：

a.?如果單個(gè)選項(xiàng)的寬度固定，超出的信息如何展示？

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

–?交互：

小小的方形對(duì)指針瞄準(zhǔn)的精確度要求較高。為了方便操作，將選框和文字綁定以擴(kuò)大點(diǎn)擊區(qū)域，同時(shí)從視覺上給用戶提供預(yù)期：例如當(dāng)鼠標(biāo)滑過時(shí)，將兩者作為整體進(jìn)行反饋。

另外，當(dāng)用戶選擇多個(gè)時(shí)，有什么辦法能減少點(diǎn)擊、快速選中多個(gè)呢？在windows中「框選」可一次性選中多個(gè)文件；在photoshop中按住鼠標(biāo)左鍵不放并滑動(dòng)可快速隱藏多個(gè)圖層。

3.?褒貶不一開關(guān)鍵

前面兩個(gè)控件在ui界的重要地位毋庸置疑，與它們相比，開關(guān)鍵爭(zhēng)議不少。

Apple Watch 交互指南中對(duì)開關(guān)的描述是：

定義：代表兩種互斥的選擇或狀態(tài)

特征：

1.?指示二元狀態(tài)

2.?通常包含標(biāo)簽

適用于：讓用戶在兩個(gè)選項(xiàng)中選擇的其中一項(xiàng)，比如on/off，yes/no

我第一次接觸開關(guān)是在移動(dòng)應(yīng)用的界面上，有非常長(zhǎng)的一段時(shí)間都很困惑：這究竟是狀態(tài)還是操作？

這個(gè)困惑跟手機(jī)輸入法早期的「中英文切換」有點(diǎn)類似：當(dāng)使用全鍵盤時(shí)，我一直無法判斷將要輸入的語言。切換按鈕上“英文”的意思是：

a.?“好啦，現(xiàn)在開始輸入英文?！??????????抑或??????????b.?“想換成英文輸入法請(qǐng)點(diǎn)我！”

很多次發(fā)送信息時(shí)，快速按下多個(gè)字母后才反應(yīng)過來當(dāng)前是英文狀態(tài)。然后不得不逐個(gè)地刪除鍵入的內(nèi)容，切換為中文再很沮喪地重新輸入一遍。后來很多廠商都對(duì)此進(jìn)行了優(yōu)化：

–?搜狗：切換語言時(shí)有toast提示狀態(tài)，切換按鈕改成【英/中】的樣式，突出當(dāng)前語言，弱化點(diǎn)擊操作后的語言；

-百度：在空格鍵處顯示當(dāng)前輸入方式「百度拼音」，點(diǎn)擊左側(cè)的【ABC】可切換成英文，切換后按鈕文案變成【返回】；

-谷歌：舊版使用標(biāo)簽頁切換中英文，新版點(diǎn)擊「地球」圖標(biāo)可以直接切換到原生英文輸入法，取消了中英文切換按鈕。

總的來說，要指示二元狀態(tài)開關(guān)鍵是個(gè)不錯(cuò)的選擇（優(yōu)于單個(gè)checkbox），但使用時(shí)必須明確地區(qū)分“狀態(tài)”與“操作”，我總結(jié)了比較關(guān)鍵的兩點(diǎn)：

1.?規(guī)范標(biāo)簽文案。動(dòng)詞、形容詞的屬性應(yīng)做到一目了然，比如使用「打開」和「已開啟」，而不是既用「開啟」表動(dòng)作，又用「開啟」表狀態(tài)；

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

雖然開關(guān)鍵已被廣泛地運(yùn)用到了軟件界面中，但據(jù)我了解還是有相當(dāng)一部分人有使用障礙，你是怎么看的呢？

三、繼續(xù)深入控件

界面設(shè)計(jì)從業(yè)者都有必要花時(shí)間了解圖形界面誕生的歷史，以及被用戶熟練使用的控件在不同版本的變化。在我們公司，每位新來的設(shè)計(jì)師都需要完成一個(gè)任務(wù)：臨摹不同平臺(tái)的核心控件。

或許你會(huì)說：Axure、Sketch 自帶的控件已經(jīng)非常豐富了為什么還要重復(fù)做？這不是自討苦吃嗎？

確實(shí)，主流的原型制作軟件已覆蓋到大部分常用的控件，一拖一放即可，輕松簡(jiǎn)便。但也正是太輕松，太信手拈來，以致在很多設(shè)計(jì)師眼里控件就是這么理所當(dāng)然。常說交互設(shè)計(jì)師應(yīng)認(rèn)真閱讀不同平臺(tái)的交互指南，但又有多少人讀過譯文或“精華版”就上陣設(shè)計(jì)了？

有沒有想過Android的Navigation Bar菜單為什么要放在邊界處？是費(fèi)茨定理的應(yīng)用嗎？為什么是左側(cè)而不是右側(cè)？喚出菜單的操作方式、過渡的顏色變化、跳轉(zhuǎn)的動(dòng)畫細(xì)節(jié)又是基于什么考慮？在 臨摹的過程中仔細(xì)推敲，品味控件的視覺層次結(jié)構(gòu)和隱含的認(rèn)知心理學(xué)，思考為何它能被廣泛應(yīng)用？為何能得到用戶認(rèn)可？是否還有不盡人意的地方？（從4.x 到Material Design設(shè)計(jì)規(guī)范都在不斷地調(diào)整）

我司開發(fā)的是面向企業(yè)客戶的互聯(lián)網(wǎng)營(yíng)銷工具，需要實(shí)時(shí)監(jiān)測(cè)和量化全流程營(yíng)銷中每個(gè)節(jié)點(diǎn)的效果。在數(shù)據(jù)報(bào)表占據(jù)屏幕大部分空間的情況下，還要保證運(yùn)營(yíng) 人員/優(yōu)化師能便捷且快速地使用豐富的功能來進(jìn)行數(shù)據(jù)分析。這就要求設(shè)計(jì)師對(duì)海量功能進(jìn)行合理整合，并在非常有限的空間內(nèi)組織布局。產(chǎn)品中再細(xì)小的元素都 經(jīng)過深思熟慮，每個(gè)模塊都經(jīng)過謹(jǐn)慎安排，真正做到聚焦最核心的用戶場(chǎng)景。

在系統(tǒng)中新建RTB廣告活動(dòng)可以從多個(gè)維度精準(zhǔn)定向人群，下面是地域定向投放的原型方案之一，其中混合了7種基礎(chǔ)控件：

1，列表

–?利用斑馬行分組，使用戶不會(huì)混淆行與行之間的數(shù)據(jù)（格式塔的相似性與封閉性原理）；

–?點(diǎn)擊首列被加粗的選項(xiàng)，可快速選中組內(nèi)的多個(gè)省市；

–?右側(cè)的省份利用對(duì)齊和留白代替豎線進(jìn)行分隔。

2，下拉菜單：曾想過使用開關(guān)鍵來表示包含/排除，但最終決定選擇下拉菜單。除了因?yàn)殚_關(guān)操作模棱兩可，還考慮到以后會(huì)增加更多規(guī)則，下拉菜單更利于擴(kuò)展。

3，搜索：輸入關(guān)鍵詞、按下Enter鍵后進(jìn)入搜索狀態(tài)（圖略）

4，標(biāo)簽欄

–?標(biāo)簽間增加“或”的文案，消除“多選一”的歧義；
–?旗下選項(xiàng)有被勾選時(shí)，在標(biāo)簽右上方標(biāo)明選中的個(gè)數(shù)。

5，文字按鈕：提供城市等級(jí)、反選、清空的快捷選項(xiàng)

6，復(fù)選框

–?區(qū)分三種狀態(tài)：未選、部分選中、全選，部分選中在右側(cè)說明占比；
–?有細(xì)分城市和地區(qū)的省份使用不同的顏色區(qū)分，暗示用戶有二級(jí)菜單。

7，嵌入彈層：鼠標(biāo)滑過選項(xiàng)時(shí)顯示

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

四、寫到最后

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

擴(kuò)大詞匯量有助于提高你在某種語言上的表達(dá)能力，擴(kuò)大「設(shè)計(jì)詞匯量」可以幫助你更好地進(jìn)行設(shè)計(jì)。但要記住，界面設(shè)計(jì)真正的藝術(shù)在于：解決正確的問題。

我們?cè)趯W(xué)生時(shí)代都背過不少成語和詩句，期待著能運(yùn)用到寫作中增加「閃光點(diǎn)」；但我們也知道有一類低分作文叫「堆砌辭藻、言而無物」。界面設(shè)計(jì)也如此，熟讀「控件字典」只意味著可以靈活調(diào)用合適的控件拼湊表單，終究不能做出深入人心的設(shè)計(jì)。

試想一下，當(dāng)用戶與機(jī)器交互的媒介不再是鍵盤和鼠標(biāo)；當(dāng)用戶只能通過編碼來進(jìn)行數(shù)據(jù)交換；甚至連屏幕都沒有（比如10086的語音菜單）……那設(shè)計(jì)師該怎么做？

讓我們都回歸到設(shè)計(jì)的本質(zhì)吧。

（如果你也熱衷于為復(fù)雜的問題尋找簡(jiǎn)單優(yōu)雅的解決方案，BiddingX設(shè)計(jì)團(tuán)隊(duì)需要你：kityee@sunteng.com）

原文來自：優(yōu)設(shè)

作者：yee