淺談軟件界面設計原則

　　在設計軟件的界面時，咱們每每以爲界面的變化萬千，須要根據具體的業務邏輯和功能來設計界面，簡而言之就是具體狀況具體分析。有時還要靠靈感、創意。同一軟件不一樣人設計出來的界面每每也大不相同，軟件的界面多是沒有統一套路的。但我總結了一些套路，有了這些套路，可讓你在大的方向上不會錯，幫你節省時間。在套路的基礎上發揮靈感與創意，更可能設計出好的軟件界面。

一些原則

• 美觀、大方、易用、既要高大上，還要接地氣 (本文不講這些)
• 不能反人類，好比左右相反，上下倒置，旋轉角度。好比鼠標往上移，光標卻往下。好比軟件上顯示的文字上下相反。
• 界面上要讓用戶看到後能直觀地理解，軟件想告訴用戶什麼信息。
• 界面要讓用戶知道操做哪裏，怎麼操做會獲得想要的結果。
• 操做要儘可能簡單，這裏列出一些原則：
  • 能選不填。能讓用戶選的就儘可能不要讓用戶填寫。
  • 選項之間老是要有必定的順序
  • 選項多到必定程度要分組。還記得QQ的好友分組麼？
  • 選擇很是多，要有搜索功能
  • 有規律的選擇，採用專用控件，支持滾動。好比選擇日期。

數量與輸入方式

　　只有有限的幾個值，不要讓用戶填，而要讓用戶選擇。
　　二選一：採用2個單選框，或者1個複選框，不讓用戶去填，好比填「對」和「錯」。打字沒有選擇方便，何況還要寫邏輯去避免用戶亂填。
　　少許有限值：單選列表或複選列表。地方（可用於顯示的面積）夠大就鋪開，不夠大就收起來，收起來便是下拉列表。由於下拉列表老是要先點一下展開列表，而鋪開不須要，因此在有條件的時候仍是鋪開，讓用戶少點一下，方便用戶。選項總數範圍參考：3~20

　　當選項超過20~40個時，要將一次選擇換成屢次選擇。好比要選擇一個區，一般是先選省，再選市 ，最後再選區。好比Windows的菜單，也是分多級。選項總數範圍參考：20~100。並且每一級的選項最好在5~20這個範圍，太少了選擇的效率低，意味着更多級的選擇，太多了難選難操做。好比100選一，就推薦設計成兩級。

　　當選項超過50~70個時，每每還要提供搜索功能，模糊搜索。

　　當填寫的值有不少個的時候，好比某會員系統的會員卡號可能達到幾百幾千個，則不合適經過選擇來完成，就得讓用戶填寫了。能夠在用戶填寫了一部分時，列出可能的列表，讓用戶從中選一個，避免用戶輸入太多字符，同時若是用戶輸入錯誤，則得不到列表，能及時幫用戶發現和糾正輸入的錯誤。

　　有規律的，連續的值，既要支持選擇，也要支持手輸。如日期、時間。距離近的選擇快，遠的手輸快。好比日期默認是今天，要想定位到昨天，用選擇的快，要想定位十幾年前某天（如生日），仍是輸入的快。有些軟件強制用戶「只能選擇不能輸入」，這種作法不可取。

　　圖片的放大縮小，永遠要保持縱橫比。圖片的觀看要容許左右旋轉90度。通常還要支持放大與縮小。

　　輸入一個比率，能夠進滑動條或進度條，若是要支持精確，能夠顯示數值和接受輸入數值。

狀態與操做

　　兩個狀態之間的切換的樣子有不少，好比燈泡的亮與滅，播放與暫停。這裏面有個狀態與操做的關係。燈亮時只有關的操做是有效的，燈來時只有開的操做是有效的。若是同時顯示燈的狀態和操做按鈕，固然沒問題，只是不夠簡潔。許多狀況下要合併狀態與操做成爲一個控件，一般是一個按鈕（或等價於一個按鈕），那麼按鈕顯示什麼呢？好比燈滅的狀況，是顯示「滅」(狀態)仍是顯示「開」(操做)呢？不一樣的軟件的作法出現了分歧。多數是顯示「操做」，好比播放器暫停時顯示的不是「暫停」，而是「播放」，就是那個向右的三角符號。而點了按鈕後狀態變成「播放中」，但顯示變成「暫停」，便是兩豎線。

 

 

　　手機上的二態開關則是這麼作的，想一想那個「飛行模型」的開關。當狀態爲開的時候，顯示綠色，小圓點在右邊，反之狀態爲關的時候，顯示爲灰色，圓點在左邊。能夠看做是用兩種顏色來表示狀態，而且不使用文字或符號來表示操做，而是統一的圖形（圓點）的左、右兩個位置來表示操做（其實也能夠看做是狀態），巧妙地避開了狀態與操做的不一致性。

　　一些軟件中，仍是簡單地使用文字，有些文字表示狀態，有些文字表示操做。圖案也和文字相似，而且有些狀況看起來是相反的。之後遇到二態的狀況，要留意嘍。別讓用戶摸不着頭腦。

　　三選一，一般是作成下拉列表，在非下拉的時候，顯示什麼呢？就是顯示當着選中的那個。好比音樂播放器的：順序、隨機和單曲循環。好比當前是「順序」，用戶點了「順序」，再選擇其它項。這個也能夠推廣到三個以上的狀況。但若是選項不多，好比5個之內，能夠在用戶點擊時直接切換到下一個，前提是這種切換不會產生反作用。好比用戶想從「順序」變成「單曲循環」，點了一下變成「隨機」後，再點一下變成「單曲循環」，中間的「隨機」狀態不會帶來反作用。假如切換到「隨機」時隨機播放了另外一曲，則再切換到「單曲循環」時就不是用戶想要的那個單曲的，這個就是反作用。

鍵盤與鼠標

　　鍵盤的優點是鍵多，能夠充分調動10個手指，因此打字時鍵盤速度遠超鼠標。鼠標的優點是能跟隨手的物理移動速度，既能在大範圍內快速移動，也能在小範圍內精肯定位。若是用鍵盤定位，就得使得不一樣的按鍵對就應不一樣的速度，好比方向下鍵光標下移一行，而PageDown鍵光標下移一頁，這種辦法除了不能移動0.5行之類的問題以外，還有一個很大的缺點是不一樣的速度須要按不一樣的鍵，操做很是不便。好處是，一行就是準確的一行，不會是0.9行。若是鼠標來打字，就得有虛擬鍵盤。鼠標難以快速準確地點擊虛擬鍵盤來打字，大概是這幾個緣由：1.鼠標是按鍵是跟着鼠標跑的，相對於手不動的，因此鼠標的移動變成了點擊虛擬鍵盤正確與否的關鍵。2.鍵盤是有觸感的，鼠標(光標)在虛擬鍵盤的兩個鍵之間移到是沒有觸感的。3.鍵盤的鍵大小與距離是按照人手指來設計的，有標準尺寸的，而鼠標移動多大距離對應虛擬鍵盤中兩個鍵的距離是沒有標準的，受多種因素影響（調節）的。4.鍵盤打字時，移動的是手指，鼠標打字時移動的是手掌，二者的慣性大小不同，須要的能量不同，敏捷度也大不同。
討論鍵盤和鼠標，是經過分析二者的特性，更好地選擇它們在不一樣場合爲輸入帶來方便。有機會再鋪開來說。

其它輸入方式

　　錄入文字，除了鍵盤和鼠標，至少還有兩種輸入方式。第1種是語音輸入，便是經過麥克風將收到的聲音經過AI翻譯成文字。在環境聲音干擾不大，AI訓練成熟，說話人發音標準的狀況下，正確率很高，接近百分百。速度比鍵盤輸入要快不少。遇到偏僻字，或冷門詞語，正確率就大打折扣。第2種是圖片識字，一般叫OCR。與語音輸入相似。字越工整，圖片越清晰，識別率越高。甚至有些OCR軟件還能識別必定的格式，好比表格。

 

 　　前端交互設計我不是專業的，懂得很淺。就當我是個用戶，說的是我從用戶的角度體驗到的關於界面的道理。我把本身僅會的那點知識，整理記錄下來。時間倉促，水平有限，請不吝指正。本文會繼續完善的。