本文為《以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é)議