前段時(shí)間在微薄上對(duì) windows 以及 vc 發(fā)牢騷。對(duì)于已經(jīng)熟悉的軟件，我很難忍受圖形界面。

但圖形界面對(duì)于大多數(shù)用戶還是必不可少的，學(xué)習(xí)門檻低是最大的原因。但僅僅為降低學(xué)習(xí)門檻為原則去設(shè)計(jì)界面卻絕對(duì)不是好的設(shè)計(jì)。

圖形界面和命令行界面最大的區(qū)別是用戶了解軟件的角度不同。對(duì)于命令行界面的軟件，用戶的第一直覺(jué)大約是，我想做一件事情，所以我使用(或編寫(xiě))這個(gè)軟件。那么，這個(gè)軟件應(yīng)該如何達(dá)到我的目的。先有需求，然后尋找答案。通常，軟件會(huì)有使用說(shuō)明、可能和軟件一起分發(fā)放在一個(gè)文本文件里，更多的是用命令行參數(shù)，傳入一個(gè) -h 之類的命令列出來(lái)。也可以在網(wǎng)上搜索�？傊�，需要用戶去挖掘。當(dāng)然，有的軟件有所有默認(rèn)配置，不需要參數(shù)就可以啟動(dòng)。如果更改了需求，可以去修改配置文件。修改配置文件的過(guò)程，往往可以通過(guò)觀察默認(rèn)配置的寫(xiě)法來(lái)學(xué)習(xí)。

圖形界面的軟件則不是這樣。

當(dāng)用戶打開(kāi)軟件，圖形界面直接展現(xiàn)出來(lái)。即使他是帶著疑問(wèn)：我該怎樣完成我的需求？但看到界面后，第一反應(yīng)卻會(huì)是：那些第一眼直觀可見(jiàn)的操作控件是做什么用的？

這個(gè)次序就變成了：我看見(jiàn)了一些功能，我想了解這些功能能達(dá)到什么目的，這些能做的事情里是否有我需要的。

如果按鈕無(wú)害，用戶會(huì)點(diǎn)點(diǎn)試試看發(fā)生了什么，現(xiàn)代軟件通常還會(huì)在他鼠標(biāo)移動(dòng)過(guò)去時(shí)浮動(dòng)一個(gè)提示框來(lái)做詳細(xì)告之。受過(guò)往操作經(jīng)驗(yàn)的影響，他可能還會(huì)按一下右鍵看一下右鍵菜單；拖動(dòng)一下看起來(lái)可以拖動(dòng)的控件；點(diǎn)一下可以點(diǎn)的下拉菜單；進(jìn)一步學(xué)習(xí)軟件能做什么。整個(gè)學(xué)習(xí)過(guò)程也就自然完成了。當(dāng)軟件的界面排布完全符合他以前用過(guò)的類似品時(shí)，這個(gè)過(guò)程可能省略到看一眼這么簡(jiǎn)短，然后直奔主題去點(diǎn)擊他需要的那個(gè)按鈕。

有時(shí)為了讓用戶可以直達(dá)目的，而不是先讓用戶自行嘗試了解所有功能，再去匹配自己的需求（后者可能相當(dāng)?shù)托�，以至于讓用戶中途放棄），軟件需要制作一個(gè)簡(jiǎn)短的新手引導(dǎo)。這在最近的手機(jī)軟件或網(wǎng)絡(luò)游戲中相當(dāng)常見(jiàn)。

在我看來(lái)，圖形界面設(shè)計(jì)之所以被稱為設(shè)計(jì)。必然需要經(jīng)過(guò)思考，先將軟件要解決的問(wèn)題抽象分類，理清數(shù)據(jù)組織結(jié)構(gòu)，幫用戶把一些從用戶角度看起來(lái)不太相關(guān)的事務(wù)提取出共性，歸納到類似的物件上。

比如 windows 把文件，文件夾等都圖形實(shí)體化，然后用拖動(dòng)來(lái)代表對(duì)其的操作，并把類似刪除這種操作也實(shí)物化為垃圾站這種東西可以作為一個(gè)操作對(duì)象。

然后經(jīng)過(guò)合理的布局和分類，排布到不同層級(jí)的界面展示。同時(shí)需要做一些創(chuàng)造，用恰當(dāng)?shù)男问絹?lái)占現(xiàn)。我所說(shuō)的形式，并不指更漂亮的圖標(biāo)，線框，字體；而是指類似彈出菜單，工具條這樣的東西。在 windows 軟件的年代，開(kāi)發(fā)者似乎并不太愿意去考慮新形式，許多人覺(jué)得現(xiàn)有的控件已經(jīng)很豐富了，我們只需要去選擇。反正用戶都已經(jīng)接受了這些東西，他們熟悉，可以不用擔(dān)心不一樣的東西帶來(lái)的風(fēng)險(xiǎn)。當(dāng)然，最重要的是，可以減少開(kāi)發(fā)成本。而最近幾年，這種想法已經(jīng)少的多了。在手機(jī) app 領(lǐng)域，我們時(shí)常能看到耳目一新的東西。雖然弄巧成拙的也有不少，但，原來(lái)還可以這樣方便的操作啊，這種感慨也挺多的。

這些才是設(shè)計(jì)師存在的價(jià)值。只是重新排布一下按鈕的擺放、計(jì)算一下留白空間、選擇好看的字體、畫(huà)幾個(gè)精美的圖標(biāo)，從視覺(jué)上討好用戶，只是界面設(shè)計(jì)中需要考慮一個(gè)方面而已，我覺(jué)得，甚至談不上是重要的一個(gè)。

好的界面設(shè)計(jì)，我認(rèn)為要考慮以下幾個(gè)方面。

一是展示功能。主界面是否能展示軟件解決的關(guān)鍵問(wèn)題。用戶都是從這里開(kāi)始摸索軟件，然后把他們看到的功能一一記下來(lái)，然后和自己心中的疑問(wèn)去匹配，判斷能否完成自己的需要。

一個(gè)軟件，或是軟件中一個(gè)模塊。往往只需要解決一兩個(gè)關(guān)鍵需求。用戶心中的疑問(wèn)也只有一兩個(gè)。過(guò)多的功能堆砌都是不恰當(dāng)?shù)�。因�(yàn)榻邮苡脩舻闹噶钪皇沁_(dá)成目的的一個(gè)開(kāi)始環(huán)節(jié)，界面還需要承擔(dān)信息反饋這個(gè)任務(wù)。大多數(shù)軟件都需要讓這個(gè)占據(jù)最大的屏幕空間。

從易于了解功能的角度講，界面控件的可辨識(shí)程度，就相當(dāng)重要。簡(jiǎn)潔的控件設(shè)計(jì)，恰當(dāng)?shù)牧舭滓酝怀鲋饕�功能都是為了讓用戶視覺(jué)上可以直擊我們需要引導(dǎo)讓他看到東西。

二是操作效率。界面控件應(yīng)該有合適的大小和間距易于定位，相關(guān)操作應(yīng)有盡量短的移動(dòng)距離。用圖標(biāo)區(qū)分相似元素的可辨識(shí)度是很重要的。合適的二級(jí)菜單可以避免主界面上信息量過(guò)大的問(wèn)題，又可以方便的引導(dǎo)用戶做多步操作，但是形式卻很重要。這方面，我覺(jué)得 tweetbot 就做的不錯(cuò)。

三是高級(jí)操作帶來(lái)的快捷操作。chrome 以前，我一直在用 opera 。最大的喜愛(ài)原因就是鼠標(biāo)手勢(shì)。雖然不是所有人都習(xí)慣復(fù)雜的鼠標(biāo)手勢(shì)，但一旦學(xué)會(huì)，可以更便捷的操作。高級(jí)操作形式不應(yīng)是達(dá)成目的的唯一操作方法，但作為一個(gè)可選項(xiàng)卻很有意義。

最后，我覺(jué)得最重要的是，應(yīng)該充分理解軟件是要做什么，而不是一味的模仿。沒(méi)錯(cuò)，用戶總希望新的軟件和他用過(guò)的軟件是一樣的，這樣就不用再學(xué)習(xí)。用戶習(xí)慣什么的，是那些模仿設(shè)計(jì)最好的借口。直到我們看到新的設(shè)計(jì)被用戶接受后，然后更新我們的界面。當(dāng)然，也有很多新設(shè)計(jì)從始至終都沒(méi)被人接受。我覺(jué)得那大多數(shù)不是因?yàn)榕で�了用戶�?xí)慣，而是本身就設(shè)計(jì)的不夠好。

比如，我認(rèn)為 QQ 的好友分組展現(xiàn)就是一個(gè)糟糕的設(shè)計(jì)。當(dāng)然，作為山寨軟件之王，那也是從 MSN 里抄來(lái)的。

最糟糕之處在于，為什么一個(gè)好友就只能存在于一個(gè)組里？（或許是我不知道如何把一個(gè)好友分到多個(gè)組里）我的同學(xué)最近在和我一起打魔獸，因?yàn)檫@個(gè)原因，我就需要把他從同學(xué)分組里拖去魔獸組？

每個(gè)分組的組名都占據(jù)有限的界面空間也是一個(gè)浪費(fèi)。更何況，這個(gè)組里有多少人，且其中多少人在線根本不是主要需要展現(xiàn)的信息，也侵占了屏幕。打開(kāi)主界面，用戶的主要目的是快速找到聯(lián)系人，而不是獨(dú)自欣賞：我有好多朋友啊。

假設(shè)允許同一個(gè)人在不同分組里也有許多問(wèn)題。

首先，分組這個(gè)操作就變得復(fù)雜了。到底是復(fù)制一個(gè)好友去一個(gè)分組，還是移動(dòng)一個(gè)好友到一個(gè)分組就會(huì)困擾用戶。刪除好友和從一個(gè)分組里刪除好友也變得不同。網(wǎng)易泡泡就曾經(jīng)面臨這個(gè)問(wèn)題。其結(jié)果就是，讓各種無(wú)所謂的操作充斥著右鍵菜單。另外，當(dāng)一個(gè)人同時(shí)處于多個(gè)組內(nèi)，也很可能在主界面上重復(fù)出現(xiàn)同一個(gè)人的信息。

這個(gè)問(wèn)題的本質(zhì)在哪里？或許分組本身就是錯(cuò)誤的。分組的本意或許是想借鑒 Windows 的文件夾的圖形抽象方式，但一開(kāi)始就錯(cuò)了。大多數(shù)分組行為是為了給人打上標(biāo)簽方便找到人，而不是讓人歸屬到文件夾下。抽象角度出了問(wèn)題，怎么改良都對(duì)不了。

現(xiàn)代社交網(wǎng)站乎都是用給人打標(biāo)簽來(lái)解決這個(gè)問(wèn)題的。一個(gè)人可以沒(méi)有，或有多個(gè)標(biāo)簽。大多數(shù)操作都是圍繞人而不是標(biāo)簽的。標(biāo)簽只是檢索人的一個(gè)手段而已。其實(shí)不光是社交網(wǎng)站，我們看到，在 gmail 這樣的 email 軟件、douban 這樣的管理自己讀書(shū)電影評(píng)論網(wǎng)站中，也是如此。

假設(shè)用標(biāo)簽系統(tǒng)來(lái)取代好友分組系統(tǒng)，我會(huì)這樣去做。

在界面的頂端保留一條標(biāo)簽欄，橫向羅列現(xiàn)在關(guān)注的標(biāo)簽。我可以展開(kāi)這個(gè)標(biāo)簽欄，展示我創(chuàng)建的所有標(biāo)簽，并可以通過(guò)鼠標(biāo)點(diǎn)擊選擇或屏蔽掉我的關(guān)注點(diǎn)。然后，在界面下方列出所有擁有至少一個(gè)關(guān)注標(biāo)簽的好友。我可以通過(guò)直接點(diǎn)擊標(biāo)簽欄中某個(gè)特定標(biāo)簽把相關(guān)人排在最前面，而不用因?yàn)槿藛T名單過(guò)長(zhǎng)而去拉動(dòng)滾動(dòng)條。甚至，滾動(dòng)條都應(yīng)該是隱藏的，就如 gtalk 那樣，必須用戶強(qiáng)制開(kāi)啟。

給好友打標(biāo)簽或去掉標(biāo)簽的操作都放在好友下方，可以點(diǎn)擊好友名字展開(kāi)（類似 tweetbot) 。

我不保證這樣的設(shè)計(jì)一定會(huì)被用戶接受，因?yàn)橛脩袅?xí)慣往往是可怕的固執(zhí)。但這樣的設(shè)計(jì)可以節(jié)省許多界面空間以展示更多用戶需要的信息。對(duì)組的操作也被簡(jiǎn)化了。

我能找到的另一個(gè)例子是計(jì)算器。我有點(diǎn)計(jì)算器 app 控，在 ios 上購(gòu)買或免費(fèi)下載了許多計(jì)算器 app 了。計(jì)算器的功能其實(shí)都差不多，但是卻少有讓人使用感覺(jué)方便的。

我覺(jué)得這個(gè)壞頭是 windows 自帶計(jì)算機(jī)開(kāi)始的。他區(qū)分了基本計(jì)算器和科學(xué)計(jì)算等。結(jié)果大多數(shù)計(jì)算器 app 也沿襲了這個(gè)設(shè)計(jì)（當(dāng)然，幾乎所有 app 也想到，可以利用重力感應(yīng)橫置設(shè)備來(lái)快速切換，而不用再讓用戶選菜單了）。且?guī)缀跛�有的�?jì)算機(jī) app 都模仿了傳統(tǒng)實(shí)物計(jì)算器的布局。

區(qū)分不同類型的計(jì)算器版面的初衷或許是好的。如果界面按鈕過(guò)多，或降低用戶的操作效率。因?yàn)榘粹o越少越密集，定位的難度就越高。當(dāng)用戶沒(méi)有那么多功能需求時(shí)，應(yīng)該讓界面更簡(jiǎn)潔。但這真是矛盾不可解決的嗎？

許多計(jì)算機(jī) app 還自帶單位轉(zhuǎn)換器，可惜多數(shù)卻做成一個(gè)額外的模式�？蔀槭裁次倚枰�切換模式去轉(zhuǎn)換單位？不應(yīng)該是計(jì)算完畢后，我需要數(shù)字結(jié)果的另一種表達(dá)嗎？

同樣的問(wèn)題還出在進(jìn)制轉(zhuǎn)換等等需求上。

現(xiàn)代圖形界面還帶來(lái)了比傳統(tǒng)計(jì)算器液晶顯示屏更豐富的展示能力，cpu 的處理能力也遠(yuǎn)非那些機(jī)器可比。怎么用好它卻是一個(gè)難題。

我不想在這里花太多文字來(lái)解釋怎么把這些問(wèn)題解決好。我想說(shuō)，如果你用過(guò) Calculator∞ 自然會(huì)和我有一些新的想法。我可以負(fù)責(zé)任的說(shuō)，作為一個(gè)計(jì)算器 app 控，我用了它的免費(fèi)版第一天就毫不猶豫的付費(fèi)了。而在昨天我在微薄上夸了它兩句，它居然就限免了。有興趣的同學(xué)趕緊裝一個(gè)試試。

文章來(lái)源：http://blog.codingnow.com

標(biāo)簽： 產(chǎn)品設(shè)計(jì) 交互設(shè)計(jì) 圖形設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。