中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

一、實現規范

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

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

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

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

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

二、間距規范

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

如果字段采用默認的文本元件，建議字段間距采用10px。詳細步驟詳見作者舊文?Axure如何調整線框圖的對齊細節。

操作步驟：根據需求拖動相應的字段值，Axure自動顯示相鄰間距，然后慢慢調整到合適的間距；或者自己根據第1個字段值的Y坐標+間距，從而得出第二個字段值的Y坐標。

三、對齊規范

1. 字段名對齊規范

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

由于有多個字段，所以需要遵循相應的對齊規范，通常是左側對齊，有時候也會選擇右側對齊，但是居中對齊是不合適的。

字段名左對齊效果：

操作步驟：按住Ctrl同時選擇所有的字段值然后點擊常用工具欄的“左側對齊”按鈕，然后再修改X坐標到合適位置。

字段名右對齊效果：

操作步驟：按住Ctrl同時選擇所有的字段值然后點擊常用工具欄的“右側對齊”按鈕，然后再修改X坐標到合適位置。

2. 字段值對齊規范

字段值有長有短，另外字數無法控制在一定范圍內，所以不適合采用右側對齊規范，只能采用左側對齊規范；展示效果詳見上面2張圖。

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

三、鏈接規范

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

1. 文字鏈接

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

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

另外需要在交互樣式——鼠標懸停的樣式，點擊勾選“下劃線”。

2. 附件鏈接

附件鏈接建議使用圖標+藍色文字表示，點擊附件鏈接自動下載到本地。

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

相關文章：

Web后臺產品的表單頁規范

Axure如何調整線框圖的對齊細節

#專欄作家#

浪子，個人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于APP原型設計和產品規范。

本文由 @浪子 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。