超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

B端組件設(shè)計(jì)如何支撐產(chǎn)品體驗(yàn),什么樣的界面算好用

2024-2-7    博博

用戶覺得軟件不好用通常是由于操作界面不符合常識(shí),交互邏輯出人意料導(dǎo)致的。用什么樣的設(shè)計(jì)來支撐產(chǎn)品體驗(yàn)值得我們深入的思考。

什么樣的界面算好用?

用戶覺得軟件不好用通常是由于操作界面不符合常識(shí),交互邏輯出人意料導(dǎo)致的。

這里我們要引入三個(gè)模型的概念:實(shí)現(xiàn)模型,心理模型和呈現(xiàn)模型。

 

 

 

設(shè)計(jì)師要理解業(yè)務(wù)訴求?

用戶是真的想要一匹很快的馬嗎?或許吧。

 

 

 

 

然后福特就發(fā)明了汽車,很好的滿足了的客戶的需求。

嗯!這個(gè)可能是一個(gè)很好的滿足了這個(gè)客戶以及一群客戶的需求。

這個(gè)故事告訴我們,我們需要挖掘客戶真正想要的東西,而不是停留在現(xiàn)有客戶所說事物的表面,傻傻去找一匹很快的“馬”。

接到需求后產(chǎn)品經(jīng)理一般會(huì)在PRD評(píng)審時(shí)向設(shè)計(jì)側(cè)講解需求背景和功能邏輯,在這個(gè)階段我們可以了解到產(chǎn)品經(jīng)理規(guī)劃中的用戶流程和使用方式。產(chǎn)品原型呈現(xiàn)的只是無數(shù)解決方案中的一種,了解了業(yè)務(wù)訴求再回顧原型方案,經(jīng)常可以帶來全新的視野,并由此推導(dǎo)設(shè)計(jì)方案。

 

下面我們就看下如何從組件,結(jié)構(gòu),功能,狀態(tài)幾個(gè)層面解決設(shè)計(jì)問題。

 

一.明確功能用途

1.1 信達(dá)雅的文案

文案是界面的重要構(gòu)成,卻是界面設(shè)計(jì)中最不被重視的一部分。很多軟件之所以用起來有一層朦朧的隔閡感,罪魁禍?zhǔn)拙褪腔逎奈陌?。簡單的糾正文案可能會(huì)帶來煥然一新的使用感受。

  • 信:語義準(zhǔn)確,明確事件的主體客體。
  • 達(dá):避免無效或重復(fù)文案,減少被動(dòng)語態(tài),簡潔通順地進(jìn)行描述。
  • 雅:優(yōu)雅且有涵養(yǎng)地與用戶溝通。
  • 配圖:有些流程或者用詞比較特殊,單用語言難以描述,配上圖一目了然。

 

 

 

1.2 視覺線索

圖形用戶界面誕生之初,界面元素對(duì)物理世界的模擬是為了便于用戶將現(xiàn)實(shí)中的常識(shí)套用到虛擬界面上:擬物化通過質(zhì)感暗示用戶界面的交互方式;在扁平化時(shí)代,提供視覺線索仍然是必要的原則。拿拖拽操作來說,首先可以拖動(dòng)的組件上要有把手,暗示可以撿起。組件被拿起來時(shí)要明顯擴(kuò)大的投影樣式描繪高度,并在列表中顯示一條瞄準(zhǔn)線便于用戶精確定位。

 

 

 

再比如卡片式設(shè)計(jì),和現(xiàn)實(shí)中的卡片相同,它可以明確地劃分出功能和信息的關(guān)系。要注意的是,視覺分區(qū)越多,頁面復(fù)雜度越高,設(shè)計(jì)時(shí)需要控制平衡。

 

 

 

1.3 熟悉的組件

用戶點(diǎn)擊下拉選擇器的時(shí)候,自然會(huì)期望在周圍彈開一個(gè)選項(xiàng)浮層,因?yàn)樗麄冇眠^的所有軟件交互都是這樣。這個(gè)就是習(xí)慣用法范式的應(yīng)用(盡可能套用常規(guī)的交互方式讓軟件的操作容易預(yù)測,用戶理解成本低)。

 

 

然而在常規(guī)組件無法承載實(shí)際需求時(shí),有必要跳出慣用范式,通過差異的視覺樣式給用戶思想準(zhǔn)備。例如一些原型圖中的選擇器使用了下拉的樣式,觸發(fā)的卻是選擇抽屜或者彈窗。這種意外的發(fā)生或多或少會(huì)降低用戶使用時(shí)的信心,因?yàn)樗麄冊(cè)僖膊淮_定點(diǎn)擊下拉后會(huì)發(fā)生什么。通過特殊與常規(guī)的區(qū)分,其實(shí)也維護(hù)了慣用范式的一致性。

你一定遇到過這種棘手的原型:頁面導(dǎo)航又多又深,林林總總地鋪酒在導(dǎo)航區(qū)和功能區(qū),信息密度堪比柯林斯英漢辭典。頁面導(dǎo)航是界面的基本框架,處理系統(tǒng)的導(dǎo)航方式是頁面設(shè)計(jì)早期就需要完成的工作。

 

二. 幾種反例

 

 

 

  • 主導(dǎo)航級(jí)數(shù)過多:視覺樣式復(fù)雜,操作時(shí)需要頻繁卷展。
  • 內(nèi)容區(qū)頭部導(dǎo)航堆積:用戶先看到的不是內(nèi)容而是導(dǎo)航,瀏覽效率較低
  • 橫向?qū)Ш椒峙洳缓侠恚翰缓侠淼慕Y(jié)構(gòu)會(huì)影響視線掃描和點(diǎn)選,且空間利用率低。以圖中的結(jié)構(gòu)為例,一級(jí)導(dǎo)航下不一定都會(huì)有二級(jí)或三級(jí)導(dǎo)航,就會(huì)導(dǎo)致頁面版式差異過大。

 

2.1 控制一級(jí)導(dǎo)航深度

一級(jí)導(dǎo)航過深時(shí),有必要進(jìn)行降級(jí)。頂欄導(dǎo)航可以向邊欄導(dǎo)航轉(zhuǎn)移。邊欄導(dǎo)航是一級(jí)時(shí),可將最低級(jí)的導(dǎo)航放到內(nèi)容區(qū)吸頂;若層級(jí)仍然不夠用或?qū)Ш綏l目較多,可以再增加一個(gè)縱向?qū)Ш健?/p>

 

 

 

2.2 平衡內(nèi)容區(qū)導(dǎo)航

吸頂導(dǎo)航會(huì)占用內(nèi)容區(qū)的縱向空間,但可以隨時(shí)跳轉(zhuǎn)。

內(nèi)容區(qū)內(nèi)的導(dǎo)航性質(zhì)更類似于篩選,能夠隨內(nèi)容滾,不便于隨時(shí)切換。

頁簽類型區(qū)別大或是需要切換對(duì)比時(shí),可以將導(dǎo)航吸頂;頁簽下內(nèi)容形式近似或需要更多瀏覽空間時(shí),可以將導(dǎo)航放在內(nèi)容區(qū)。

 

 

 

2.3 減少空間浪費(fèi)

很多原型會(huì)習(xí)慣性地在頁面頂部配置一個(gè)頂欄。實(shí)際上里面的商標(biāo),賬戶信息,設(shè)置等功能可以整合到邊欄中,這樣內(nèi)容區(qū)上方會(huì)多一些縱向空間。

 

 

 

三.合理布置功能

3.1分級(jí)展示功能

比如一些的圖表類頁面主要用于瀏覽而不是編輯,這種情況下將操作隱藏到省略號(hào)或者漢堡菜單中,不僅可以減少信息干擾,還能避免誤操作。

 

 

高級(jí)功能的隱藏很好理解,比如 macOS 的網(wǎng)絡(luò)配置只顯示基礎(chǔ)的連接功能,DNS 配置等高級(jí)操作被整理到了一個(gè)按鈕中。你可以想象如果所有的配置項(xiàng)都展示一個(gè)頁面,對(duì)于用戶日常聯(lián)網(wǎng)操作會(huì)有多么不友好。

 

 

 

 

 

3.2 拆分功能

除了分級(jí),當(dāng)頁面或區(qū)域內(nèi)的功能過于集中時(shí),可以進(jìn)行拆分以降低信息壓力。

分離檢索與查看:列表同時(shí)兼具瀏覽與管理的功能,但在字段眾多,空間有限的情況下,可以選擇其中有代表性的字段在單元行中顯示,便于快速掃描和管理,完整的單元行信息放到下一個(gè)層級(jí)顯示。

 

 

分離表單區(qū)塊:當(dāng)表單存在區(qū)塊表單時(shí),可以只在表單中顯示區(qū)塊的預(yù)覽,將區(qū)塊的新增和配置放到抽屜中進(jìn)行,由此減少功能堆積。

 

 

 

3.3 數(shù)據(jù)的編輯

涉及數(shù)據(jù)編輯的頁面存在四種設(shè)計(jì)方式,需要綜合考慮表單的數(shù)量,用戶的操作頻次和使用方式來判斷采用哪種。

查看模式:帶查看模式的頁面視覺效果整齊,信息干擾最小,且不會(huì)誤操作。但需要進(jìn)入編輯模式修改頁面內(nèi)容。

 

 

直接編輯模式:用戶到達(dá)頁面時(shí),數(shù)據(jù)就可以被修改生效。常見于設(shè)置類頁面。該模式使用效率最高。但由于容易誤操作且視覺信息冗雜,不太適合大型表單。

 

 

行內(nèi)編輯模式:頁面樣式類似查看模式,當(dāng)鼠標(biāo)懸停在數(shù)據(jù)上,界面會(huì)提示用戶此處可以編輯,用戶點(diǎn)擊后可以快速針對(duì)局部數(shù)據(jù)做修改。該模式只適用表單項(xiàng)少的情況。

 

 

實(shí)時(shí)保存:頁面長期處于編輯模式,系統(tǒng)會(huì)自動(dòng)保存用戶的操作。常見于線上文檔工具。該模式誤操作風(fēng)險(xiǎn)最高,需要提供版本控制和操作撤回功能。

 

 

 

3.4減輕視覺壓力

業(yè)務(wù)層面上無法避免單頁出現(xiàn)大量表單時(shí),可以在視覺上分節(jié)。注意!和真正的分步不同,這里的只是從視覺層面對(duì)頁面信息進(jìn)行處理,沒有流程先后的概念,所以盡可能不要拆分頁面。

以下圖為例,通過視覺上的劃分,即使在同一個(gè)頁面顯示同樣數(shù)量的表單,版面空間的呼吸給予了用戶喘歇的余地。錨點(diǎn)導(dǎo)航是個(gè)錦上添花的控件,空間允許時(shí)可以加上。

 

 

 

四.補(bǔ)救意外情況

4.1空狀態(tài)引導(dǎo)

一個(gè)列表出現(xiàn)空狀態(tài)的可能性有:

 

 

 

  • 確實(shí)沒有條目:如果能添加的話,可以提示用戶如何添加。
  • 應(yīng)用了過多篩選器:提示用戶嘗試其他篩選方式或重置篩選器。
  • 加載異常:提示用戶刷新頁面。

雖然后果一樣,但問題本質(zhì)不同,解決方式自然也不同,此時(shí)需要分別給出對(duì)應(yīng)的引導(dǎo)。

 

4.2 異常引導(dǎo)

再?zèng)]有什么比一行“操作失敗”的提示更讓人絕望,用戶不知道哪出了問題,也不清楚如何解決。異常流程時(shí)有發(fā)生,此時(shí)系統(tǒng)的引導(dǎo)會(huì)起到至關(guān)重要的作用,它能夠帶用戶走回正軌,減少無助感。

 

 

 

4.3 標(biāo)明功能不可用的原因

該問題的重災(zāi)區(qū)是工具類軟件,用著用著一些功能突然就灰掉了,只能慢慢摸索是哪里的問題。功能之所以不可用肯定有個(gè)原因,不論是直接顯示還是鼠標(biāo)懸停時(shí)顯示,有必要要讓用戶明白原由或者如何解決,避免把用戶困在死胡同。

 

 

 

4.4提供幫助

新手教程特別考驗(yàn)用戶的記憶力,尤其是在新接觸軟件的學(xué)習(xí)爬坡階段,而且很難保證在一段時(shí)間不用后,用戶還能記得如何操作。當(dāng)系統(tǒng)引入了晦澀概念或復(fù)雜交互時(shí),最好在該功能周圍提供說明,或懸停時(shí)展示 tooltip.使用戶無需長期記憶,在用到該功能時(shí)又可以快速上手。

 

 

 

結(jié)語

圖形界面的本質(zhì)是人與機(jī)器交流的語言。與現(xiàn)實(shí)生活一樣,我們傾向與禮貌體貼的對(duì)象溝通。所以下手設(shè)計(jì)時(shí)要盡最大可能從人類的本性出發(fā),才能在業(yè)務(wù)和產(chǎn)品邏輯的限制下,為用戶塑造更具親和力的界面模型。



作者:逸爵
來源:站酷

 

 

藍(lán)藍(lán)設(shè)計(jì)(m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)軟件vue開發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔