譯文|為未來的SaaS應(yīng)用,提供新的交互及視覺設(shè)計(jì)
本文介紹給大家一些基本需要關(guān)注的點(diǎn),以及我們?cè)O(shè)計(jì)團(tuán)隊(duì)通過在相當(dāng)長(zhǎng)的時(shí)間內(nèi)的試驗(yàn)和學(xué)習(xí),如何為在線辦公應(yīng)用Zoho設(shè)計(jì)更好的用戶體驗(yàn)?
最近在做B2B的網(wǎng)站后臺(tái),B2B模式網(wǎng)站后臺(tái)交互與網(wǎng)頁版的企業(yè)級(jí)辦公產(chǎn)品交互有很多共通之處,設(shè)計(jì)時(shí)可借鑒此類網(wǎng)頁應(yīng)用比較流行的模式。 SaaS,一種網(wǎng)頁應(yīng)用。(Software as a service,它是一種軟件交付模式。在這種交付模式中云端集中式托管軟件及其相關(guān)的數(shù)據(jù),軟件僅需透過互聯(lián)網(wǎng),而不須透過安裝即可使用。用戶通常使用精簡(jiǎn)客戶端經(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í)的界面到新的時(shí)尚的界面,ZoHo Books經(jīng)歷了數(shù)年的改進(jìn)。每次改進(jìn)我們都進(jìn)行了大范圍的用戶可用性測(cè)試,可用性測(cè)試對(duì)了解哪些改進(jìn)設(shè)計(jì)能產(chǎn)生更好的結(jié)果相當(dāng)重要。 可以先將同事作為測(cè)試的主體“Your employee experience is where your customer experience begins”——Jennifer Winter 頂部靠右的標(biāo)簽卡式導(dǎo)航改為左側(cè)導(dǎo)航。 如果你經(jīng)常使用SaaS應(yīng)用,你會(huì)發(fā)現(xiàn)越來越多的產(chǎn)品在使用左側(cè)導(dǎo)航了! 原因: 三欄的布局是目前側(cè)邊導(dǎo)航的擴(kuò)展,在第二欄展示項(xiàng)目列表,在右側(cè)內(nèi)容區(qū)展示在第二欄中選中的列表項(xiàng)的詳細(xì)內(nèi)容。 (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)。 利用屏幕右側(cè)多出的空間放置與正文內(nèi)容相關(guān)的操作。 把所有支線的任務(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》 譯者:木野蔡 譯文地址:http://jdc.jd.com/archives/1812設(shè)計(jì)問題
如何設(shè)計(jì)
1、導(dǎo)航
2、三欄布局
3、讓表單更有趣味性
4、右側(cè)欄
5、設(shè)計(jì)時(shí)考慮上下文操作
- 目前還沒評(píng)論,等你發(fā)揮!