以web端為例:我的交互設(shè)計(jì)細(xì)節(jié)手冊(cè)(下)

11 評(píng)論 15698 瀏覽 108 收藏 9 分鐘

本文為《以web端為例:我的交互設(shè)計(jì)細(xì)節(jié)手冊(cè)》的下半部分,內(nèi)容繼續(xù)專(zhuān)注于web端的交互設(shè)計(jì)細(xì)節(jié)問(wèn)題,文中所有所舉實(shí)例都來(lái)自于作者實(shí)際工作中所遇到或者思考過(guò)的交互問(wèn)題,具有實(shí)際的參考意義。

一、關(guān)于頁(yè)面提示的設(shè)計(jì)

1.1 無(wú)提示狀態(tài)

對(duì)于一些簡(jiǎn)單且操作后狀態(tài)變化明顯的操作,不需要進(jìn)行任何提示,防止打斷用戶(hù),例如打開(kāi)關(guān)閉開(kāi)關(guān)、點(diǎn)贊等,這些操作通過(guò)頁(yè)面上元素的狀態(tài)變化已經(jīng)明顯的反饋給用戶(hù)操作結(jié)果,就不需要再進(jìn)行任何提示(如下圖)。

1.2 全局提示狀態(tài)

全局提示一般是對(duì)操作結(jié)果的反饋,但不需要用戶(hù)進(jìn)行二次確定或者下一步的引導(dǎo),且操作的結(jié)果在頁(yè)面表現(xiàn)上較弱,這時(shí)候就需要全局提示用戶(hù)操作的結(jié)果。

例如聯(lián)系人分配成功,因?yàn)榉峙浜?,?lián)系人卡片上的變化極小,僅僅是歸屬人的字段發(fā)生改變,用戶(hù)不易感知到分配是否成功,這時(shí)候需要進(jìn)行全局提示。

1.3 彈窗提示

彈窗提示的使用主要是以下三個(gè)場(chǎng)景:

(1)對(duì)于部分毀滅性或者不可逆操作需要用戶(hù)進(jìn)行二次確認(rèn)(如下圖一)。

(2)部分需要進(jìn)行引導(dǎo)的反饋都需要是用彈窗提示。

例如:下圖二消息接收設(shè)置這里,如果沒(méi)有完善店鋪的資料,將接收不到消息,于是點(diǎn)擊消息開(kāi)關(guān)需要提示用戶(hù)先去完善店鋪資料,這里就需要使用彈窗提示,引導(dǎo)用戶(hù)去完善店鋪資料。

(3)重要信息需要用戶(hù)確認(rèn)的,或者信息內(nèi)容過(guò)多,需要花費(fèi)用戶(hù)一定時(shí)間去閱讀的(如下圖三)。

1.4 固定導(dǎo)航提示

固定導(dǎo)航提示主要分為兩種:

  1. 可關(guān)閉的式的導(dǎo)航固定導(dǎo)航提示。一般用于與該頁(yè)面業(yè)務(wù)有關(guān)的說(shuō)明或者需要提醒用戶(hù)的提示;
  2. 不可關(guān)閉的提示。這種提示的業(yè)務(wù)層面級(jí)別高于上一種提示,必須讓用戶(hù)知道,固定導(dǎo)航的提示一般在登陸系統(tǒng)后才出現(xiàn)。

1.5 側(cè)邊系統(tǒng)提示

側(cè)邊系統(tǒng)提示一般是系統(tǒng)類(lèi)的提示,或者跨功能的提示。

比如來(lái)了一封新的郵件或者系統(tǒng)程序出現(xiàn)了某種故障需要告知用戶(hù),往往是被動(dòng)的及時(shí)反饋的提示(與主動(dòng)及時(shí)操作反饋不是一個(gè)概念),這類(lèi)通知對(duì)于頁(yè)面的一般在頁(yè)面的右側(cè)出現(xiàn),且必須會(huì)自動(dòng)消失或者可以手動(dòng)關(guān)閉。

二、對(duì)于圖片展示規(guī)則的設(shè)計(jì)

2.1 社交媒體類(lèi)平臺(tái)

對(duì)于社媒類(lèi)平臺(tái),圖片都是由個(gè)人進(jìn)行上傳,各種圖片尺寸、質(zhì)量都參差不齊,而為了優(yōu)化體驗(yàn)和保持美觀,一般會(huì)按照上下左右居中截取的方式把圖片展示出來(lái)(規(guī)則為上下左右居中截取,小圖會(huì)自動(dòng)放大適配長(zhǎng)寬去截取,如新浪微博)。

2.2 工具類(lèi)平臺(tái)

對(duì)于工具類(lèi)平臺(tái),會(huì)按照長(zhǎng)寬縮略展示圖片全部概況(圖片同比縮放展示),因?yàn)樵诠ぞ咂脚_(tái)里主要滿足圖片使用的場(chǎng)景,如淘寶店鋪里上傳產(chǎn)品詳情圖,這時(shí)用戶(hù)更需要了解圖片的基本概覽。

三、是否需要新開(kāi)頁(yè)面的規(guī)則

在實(shí)際設(shè)計(jì)工作中,我們經(jīng)常會(huì)遇到這樣的問(wèn)題,點(diǎn)擊某個(gè)按鈕是新開(kāi)頁(yè)面還是本頁(yè)跳轉(zhuǎn)。當(dāng)然這里面牽扯到的原因會(huì)有很多,比如阿里千牛后臺(tái),點(diǎn)擊每個(gè)一級(jí)二級(jí)tab都會(huì)在一個(gè)新的頁(yè)面打開(kāi),這是因?yàn)樯顚哟蔚纳虡I(yè)原因,現(xiàn)在僅站在設(shè)計(jì)的角度上來(lái)分析這個(gè)問(wèn)題。

3.1 導(dǎo)航層級(jí)之間的切換

在一個(gè)后臺(tái)系統(tǒng)中,在導(dǎo)航切換時(shí),是不用新建頁(yè)面的,無(wú)論是一級(jí)二級(jí)三級(jí)的導(dǎo)航都是在原頁(yè)跳轉(zhuǎn)。

3.2 跳轉(zhuǎn)鏈接

如果點(diǎn)擊的是一個(gè)外網(wǎng)鏈接,則建議新建一個(gè)頁(yè)面進(jìn)行展示。

3.3 查看詳情

查看詳情是一個(gè)常見(jiàn)的操作場(chǎng)景,目前大多數(shù)平臺(tái)是新建頁(yè)面查看,但我建議在后臺(tái)系統(tǒng)中可以用模態(tài)的形式展示詳情,這樣做的好處主要在于可以在查看詳情的同時(shí)對(duì)比其他同類(lèi)數(shù)據(jù),當(dāng)然也可以新開(kāi)頁(yè)面去查看詳情,但記住不要在詳情頁(yè)里放置刪除此單元的按鈕,因?yàn)檫@樣會(huì)造成數(shù)據(jù)不同步的bug。

四、用列表還是用卡片

在設(shè)計(jì)一類(lèi)信息區(qū)塊時(shí),通常有兩種比較常用的信息展示形式,卡片和列表。設(shè)計(jì)師也往往會(huì)糾結(jié)使用那種展示形式,這里有個(gè)訣竅可以分享給大家——如果信息數(shù)量較多,且所有信息字段展示數(shù)量一致用卡片,其余情況都用列表。

下圖就是一個(gè)典型案例,由于展示字段數(shù)量不一致,且還有更多的拓展字段,導(dǎo)致卡片上的操作都不一致,且查看卡片詳情時(shí)很尷尬——因?yàn)橛械目ㄆ侄我呀?jīng)全部展示出來(lái)了,這時(shí)查看詳情沒(méi)有意義,但有些卡片字段被隱藏了,就需要點(diǎn)擊詳情去查看或者展開(kāi)卡片查看,導(dǎo)致頁(yè)面交互變得十分復(fù)雜。

而反觀左側(cè)列表式的方式,拓展性良好,無(wú)論有多少字段需要展示都可以向下延展展示,即使在同等高度上展示的區(qū)塊數(shù)量沒(méi)有右側(cè)卡片多,但對(duì)于信息完整度則好多了。

以上就是《以web端為例:我的交互設(shè)計(jì)細(xì)節(jié)手冊(cè)(下)》全部?jī)?nèi)容,如果沒(méi)有閱讀過(guò)上篇的同學(xué)可以點(diǎn)擊《以web端為例:我的交互設(shè)計(jì)細(xì)節(jié)手冊(cè)(上)》閱讀,同時(shí)預(yù)告一下本文作者正在撰寫(xiě)一篇服務(wù)設(shè)計(jì)和全鏈路設(shè)計(jì)相關(guān)的文章,將在月底發(fā)布,有興趣的同學(xué)可以關(guān)注我。

結(jié)語(yǔ):本文案例參考了“新浪微博”、“盈店通平臺(tái)”、“大搜車(chē)SRP”部分頁(yè)面和控件,如涉及侵權(quán)請(qǐng)聯(lián)系作者刪除。

 

作者:李小先生,公眾號(hào):速食設(shè)計(jì)

本文由 @李小先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. “但記住不要在詳情頁(yè)里放置刪除此單元的按鈕,因?yàn)檫@樣會(huì)造成數(shù)據(jù)不同步的bug”,請(qǐng)問(wèn)可以詳細(xì)解釋一下嗎

    來(lái)自廣東 回復(fù)
  2. 作者講的很多內(nèi)容都是web端設(shè)計(jì)的一些問(wèn)題點(diǎn),但是大部分情況下,很多設(shè)計(jì)方式都是要基于具體情況的,沒(méi)有對(duì)錯(cuò)之分,只有合不合適業(yè)務(wù)訴求。

    來(lái)自上海 回復(fù)
  3. 請(qǐng)問(wèn)可以轉(zhuǎn)載到公眾號(hào)嗎,會(huì)注明來(lái)源與作者

    來(lái)自浙江 回復(fù)
    1. 可以的

      來(lái)自浙江 回復(fù)
  4. 感謝分享,請(qǐng)問(wèn)一下,后臺(tái)在新增/編輯數(shù)據(jù)時(shí),是傾向新建標(biāo)簽頁(yè)還是彈窗?

    來(lái)自四川 回復(fù)
    1. 彈窗或者抽屜

      來(lái)自浙江 回復(fù)
    2. 得看你新增的內(nèi)容多少了,如果新增內(nèi)容少,建議彈窗或者抽屜,如果內(nèi)容很多或會(huì)出現(xiàn)二級(jí)彈窗的情況下,可以新建標(biāo)簽頁(yè)。當(dāng)然,從效率角度出發(fā),b端產(chǎn)品的設(shè)計(jì),層級(jí)是越淺越好的。

      來(lái)自上海 回復(fù)
  5. 簡(jiǎn)單明了,容易理解。贊一下

    來(lái)自浙江 回復(fù)
    1. 謝謝支持

      來(lái)自浙江 回復(fù)
  6. 寫(xiě)的很棒 期待下一篇文章 ?

    來(lái)自浙江 回復(fù)
    1. ? 謝謝支持

      來(lái)自浙江 回復(fù)