SaaS，一種網(wǎng)頁應(yīng)用。（Software as a service，它是一種軟件交付模式。在這種交付模式中云端集中式托管軟件及其相關(guān)的數(shù)據(jù)，軟件僅需透過互聯(lián)網(wǎng)，而不須透過安裝即可使用。用戶通常使用精簡客戶端經(jīng)由一個(gè)網(wǎng)頁瀏覽器來訪問軟件服務(wù)。）

云端軟件即服務(wù)已代替?zhèn)鹘y(tǒng)笨重的桌面軟件，打造優(yōu)異的用戶使用界面讓你的應(yīng)用脫穎而出已是勢(shì)在必行之事，然而這也意味著諸多的挑戰(zhàn)。

設(shè)計(jì)問題

在說如改何良設(shè)計(jì)之前，有一些設(shè)計(jì)問題需要先提出來：

• 布局：考慮新的趨勢(shì)、習(xí)慣、多平臺(tái)多設(shè)備
• 產(chǎn)品工作流程（workflow）：The less time it takes, the more UX points we win 一個(gè)好的產(chǎn)品用戶體驗(yàn)是它能花更少的時(shí)間讓用戶完成任務(wù)
• 視覺設(shè)計(jì)：毫無疑問，需要漂亮的界面
• 表單（forms）：表單是枯燥的，沒有人喜歡填寫表單。但是我們又離不開表單，所以它必須被設(shè)計(jì)得易填寫

如何設(shè)計(jì)

我們是如何重新設(shè)計(jì)的？

從舊的過時(shí)的界面到新的時(shí)尚的界面，ZoHo Books經(jīng)歷了數(shù)年的改進(jìn)。每次改進(jìn)我們都進(jìn)行了大范圍的用戶可用性測試，可用性測試對(duì)了解哪些改進(jìn)設(shè)計(jì)能產(chǎn)生更好的結(jié)果相當(dāng)重要。

可以先將同事作為測試的主體“Your employee experience is where your customer experience begins”——Jennifer Winter

1、導(dǎo)航

頂部靠右的標(biāo)簽卡式導(dǎo)航改為左側(cè)導(dǎo)航。

如果你經(jīng)常使用SaaS應(yīng)用，你會(huì)發(fā)現(xiàn)越來越多的產(chǎn)品在使用左側(cè)導(dǎo)航了！

原因：

• 寬屏趨勢(shì)下，更多的橫向空間，有放置左側(cè)導(dǎo)航的位置，且容易觸控；
• 節(jié)省垂直空間，以便主體內(nèi)容更好的利用；
• 在側(cè)邊欄可以放置更多的菜單項(xiàng)（可上下滑動(dòng)）。

2、三欄布局

三欄的布局是目前側(cè)邊導(dǎo)航的擴(kuò)展，在第二欄展示項(xiàng)目列表，在右側(cè)內(nèi)容區(qū)展示在第二欄中選中的列表項(xiàng)的詳細(xì)內(nèi)容。

3、讓表單更有趣味性

（1）讓表單填寫更加容易，交互更容易識(shí)別——設(shè)計(jì)自定義表單控件，以下是我們個(gè)性化設(shè)計(jì)的表單控件：

下拉搜索菜單、下拉菜單加入添加操作（直接在下拉菜單中添加選項(xiàng)，免去跳到其他頁面編輯添加）、下拉菜單項(xiàng)分組；

（2）把不同表單項(xiàng)規(guī)組到不同標(biāo)簽卡下，不要把所有表單都平鋪在一個(gè)頁面中，可以根據(jù)使用情況進(jìn)行分類；

（3）從視覺上提升可讀性：

可讀性是表單易填寫的重要因素。我們通過調(diào)整表單區(qū)的色彩和焦點(diǎn)，呈現(xiàn)更加舒適的視覺體驗(yàn)。

4、右側(cè)欄

利用屏幕右側(cè)多出的空間放置與正文內(nèi)容相關(guān)的操作。

5、設(shè)計(jì)時(shí)考慮上下文操作

把所有支線的任務(wù)融進(jìn)主任務(wù)頁面中，而不是把它們分別放在不同的頁面去操作（當(dāng)下的網(wǎng)頁技術(shù)及網(wǎng)頁響應(yīng)速度，可以在頁面不跳轉(zhuǎn)的情況下完成多項(xiàng)任務(wù)）。比如下圖展示了當(dāng)用戶在Zoho Books為商品/服務(wù)創(chuàng)建發(fā)票時(shí)，我們是如何依據(jù)情景提供商品/服務(wù)所需的設(shè)置項(xiàng)。

作者： jelumalai

原文來自Medium，題目《Modern UI/UX for SaaS applications in 2015 and Beyond》