編輯導(dǎo)語：Web后臺產(chǎn)品的詳情頁通常是表單頁的查看效果，PM經(jīng)常遇到，那么畫它的時(shí)候遵循哪些常見規(guī)范呢？本篇文章作者詳細(xì)介紹了Web后臺產(chǎn)品的詳情頁規(guī)范，我們一起來看一下。

Web后臺詳情頁主要由字段名和字段值組成，根據(jù)需求也會包含圖片，鏈接，附件等元素；大家可以看看作者使用規(guī)范畫出來的詳情頁https://eda513.axshare.com是否比較簡潔整齊。

一、實(shí)現(xiàn)規(guī)范

對于完全由字段名和字段值組成的詳情頁，建議采用Axure的表格元件來畫原型，簡單快速；效果如下圖。

操作步驟：從默認(rèn)元件庫中拖動“表格”到工作區(qū)合適位置，然后第一列填充相應(yīng)的字段名，第二列填寫相應(yīng)的字段值，最后刪除多余的第三列即可。

如果詳情頁還有圖片、鏈接、附件等元素。建議采用Axure的文本元件來畫原型，適應(yīng)性比較強(qiáng)；效果如下圖。

操作步驟：先畫字段名，從默認(rèn)元件庫中拖動“文本標(biāo)簽”到工作區(qū)合適位置然后雙擊輸入名稱；再畫字段名，從默認(rèn)元件庫中拖動“文本標(biāo)簽”到工作區(qū)合適位置然后雙擊輸入名稱。

注意：字段值有時(shí)候需要選擇圖片/文字鏈接等其他Axure元件。

二、間距規(guī)范

字段間距需要保持一致(或者保證相鄰字段的縱坐標(biāo)差值)，這樣整體的顯示效果會比較好。

如果字段采用默認(rèn)的文本元件，建議字段間距采用10px。詳細(xì)步驟詳見作者舊文?Axure如何調(diào)整線框圖的對齊細(xì)節(jié)。

操作步驟：根據(jù)需求拖動相應(yīng)的字段值，Axure自動顯示相鄰間距，然后慢慢調(diào)整到合適的間距；或者自己根據(jù)第1個(gè)字段值的Y坐標(biāo)+間距，從而得出第二個(gè)字段值的Y坐標(biāo)。

三、對齊規(guī)范

1. 字段名對齊規(guī)范

字段名有長有短，建議控制在3~6字以內(nèi)，這樣的展示效果會比較好。

由于有多個(gè)字段，所以需要遵循相應(yīng)的對齊規(guī)范，通常是左側(cè)對齊，有時(shí)候也會選擇右側(cè)對齊，但是居中對齊是不合適的。

字段名左對齊效果：

操作步驟：按住Ctrl同時(shí)選擇所有的字段值然后點(diǎn)擊常用工具欄的“左側(cè)對齊”按鈕，然后再修改X坐標(biāo)到合適位置。

字段名右對齊效果：

操作步驟：按住Ctrl同時(shí)選擇所有的字段值然后點(diǎn)擊常用工具欄的“右側(cè)對齊”按鈕，然后再修改X坐標(biāo)到合適位置。

2. 字段值對齊規(guī)范

字段值有長有短，另外字?jǐn)?shù)無法控制在一定范圍內(nèi)，所以不適合采用右側(cè)對齊規(guī)范，只能采用左側(cè)對齊規(guī)范；展示效果詳見上面2張圖。

給大家看一下右側(cè)對齊的反面案例效果，相信有一定審美的PM都不會如此設(shè)計(jì)。

三、鏈接規(guī)范

Web詳情頁的通常有文字鏈接、圖片鏈接、附件鏈接、視頻鏈接；他們需要遵循不同的交互規(guī)范。

1. 文字鏈接

文字鏈接建議使用藍(lán)色字體，懸停顯示下劃線。

操作步驟：點(diǎn)擊該文本鏈接，設(shè)置鼠標(biāo)單擊時(shí)事件，添加動作“打開鏈接”，然后選擇打開在“通過新標(biāo)簽頁打開”(有時(shí)候也采用原標(biāo)簽頁打開)，然后鏈接到相應(yīng)的頁面。

另外需要在交互樣式——鼠標(biāo)懸停的樣式，點(diǎn)擊勾選“下劃線”。

2. 附件鏈接

附件鏈接建議使用圖標(biāo)+藍(lán)色文字表示，點(diǎn)擊附件鏈接自動下載到本地。

操作步驟：點(diǎn)擊該文本鏈接，設(shè)置鼠標(biāo)單擊時(shí)事件，添加動作“打開鏈接”，鏈接到“鏈接到URL或文件路徑”；然后輸入相對的本地路徑，最后選擇在當(dāng)前窗口打開，文章開頭的原型地址中可以體驗(yàn)相應(yīng)的交互過程。

相關(guān)文章：

Web后臺產(chǎn)品的表單頁規(guī)范

Axure如何調(diào)整線框圖的對齊細(xì)節(jié)

#專欄作家#

浪子，個(gè)人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于APP原型設(shè)計(jì)和產(chǎn)品規(guī)范。

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

題圖來自Unsplash，基于CC0協(xié)議。