法國航空官網設計體驗

最近一直在做網頁，因為內容涉及到很多表單、搜索框和註冊環節等，所以針對性的看了下各大航空公司的官網設計，發現法國航空的官網設計很有特色，現分享給大家。

△法國航空官網首頁一覽

1 搜索框

搜索框是以內容為主的網站中非常重要的設計元素，近期做後台類網頁設計，其中有很多搜索框，我也一直在想，到底什麼是搜索框，用戶希望要一個什麼樣的搜索框？

用戶用搜索框的目的肯定是想尋求答案，搜索框其實是一種比較直接的解決方式，用戶可以藉助它對網站的內容進行搜索，而不必通過導航或者胡亂點擊去尋找答案。

這是一種常規搜索框樣式，它廊括了以下元素：

1、輸入信息的文本框和啟動按鈕；

2、文本輸入框中輸入的信息提示；

3、自動完成，當用戶輸入信息時，猜測用戶想要輸入的內容並且自動填充文本框，例如上圖我輸入北這個字，自動聯想出北京出發的行程相關；

4、下拉菜單等多種控制項輔助。

細節設計：然而我在體驗的時候還發現了一個非常人性化的設計，你在出發地的框內輸入北這個字，他會出現含有北這個字的相關信息，但是你輸入上這個字，他只有一個上海，所以只要你輸入上，他就會自動幫你在框內填充上海浦東機場，這等於是讓用戶輸入的時候直接少了一個步驟，類似的地方其他的航空公司網站沒有這種細節設計。

GIF

△搜索等待頁面，見縫插針展示企業形象

2 步驟條

步驟條是用戶執行一個任務的步驟指示和引導，它的作用就在於讓用戶知道總體的步驟和所處的位置。

△法航步驟條的設計充分的結合了自己的品牌特徵，而且極具動感，是很好的設計

△用階梯設計來表現艙的級別，直觀且讓用戶記憶深刻

3 搜索結果頁

搜索結果頁是指搜索引擎對某個搜索請求反饋的結果頁面，通常包含了一個搜索結果的列表。下圖是法航的搜索結果頁：

其中包含了：

1、搜索結果頁面的標題，例如廣州-廣州白雲機場；

2、搜索結果頁面的鏈接；

3、一段簡短的並且與搜索關鍵字相匹配的關於網頁的文字摘要；

4、搜索結果數；

5、最常用的搜索指引。

4 註冊表單

表單（form）通常由表單標籤、表單域和表單按鈕構成。其中包含眾多元素，如文本輸入框、密碼輸入框、隱藏域、多行文本輸入框、複選框、單選框、下拉選擇框和文件上傳框，提交按鈕、複位按鈕和一般按鈕。

△充分的提示和幫助非常有助於用戶達成

5 容錯

△錯誤提示

用戶在填寫類似上面表單時候，常會出錯。相對於實體產品來說，雖然使用互聯網產品的出錯不會造成太致命的問題，但是如果系統不能預見或者幫助用戶犯錯，那也是令人沮喪的事情。

我們常見的錯誤如下：

1、一般理解上的偏差；

2、失誤，操作上的誤差；

3、遺漏，遺漏了相應的行為。

相應的解決辦法如下：

1、要注意設計模式以及文案設計語義的合理性和一致性；例如上面表單部分提到的充分的提示；

2、儘可能實現兼容或者提前容錯設計;

3、由於遺漏產生的錯誤，多見於複雜的窗體的填寫，這時候要區分清楚哪些是必填，哪些是選填。有時候也應為步驟過多，比如分成幾步的表格，如果填完後面的時候發現前面填寫的錯誤，應該讓用戶可以返回之前的步驟，且系統自動保存相關數據在本地。

GIF

△註冊流程分成兩頁，第二頁右上角的修改按鈕可以返回第一頁

6 評價反饋

評價系統設計本質是表單設計，充當著一個快速搜集用戶看法的簡單工具，其被要求在很短時間內完成，因為用戶並不喜歡思考，而且他們時間精力有限，所以說設計上要極其注重可用性和易用性，此外還應該符合用戶認知習慣。

最後對於購買機票這種任務型的情景，我們需要考慮的是所有操作步驟是否是必需的，有沒有可能略過的中間步驟；滑鼠移動的距離是否可以減少，是否支持快捷操作；對常見的操作和不常用的操作是否做了區分。

感謝閱讀！

作者：terechen

交互設計學堂已經開設了新的欄目-行知書院，旨在幫助小夥伴們來高效的學習現在市面上優秀的用戶體驗書籍比如《交互設計精髓》等等，同時結合老D的工作經驗來幫助你們從不同的高度和角度來解讀書中的內容。每天一課，積少成多。已有222位小夥伴加入。詳細了解行知書院

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！