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

編輯導讀：在產品經理開始畫Web產品原型之前，一定要清楚使用什么尺寸來畫出原型的頁面。本篇文章作者詳細介紹了Web產品原型尺寸的常用規范和相關步驟，并對每個步驟需要注意的問題進行了梳理分析，與大家分享。

原型尺寸，是指PM畫產品原型的時候，頁面該采用什么樣的寬高px。即默認視圖下的頁面寬度是多少px，高度是多少px。

通常我們PM選擇1200px/1280px/1400px等寬度尺寸來畫原型，但是你們知道為什么應該用這樣的尺寸嗎？以及所有的Web產品都應該用這樣的尺寸嗎？

希望通過這篇文章來給大家普及一下Web產品的原型尺寸的常用規范。接下來帶著大家按照如下四個步驟來理解為什么應該用這樣的尺寸。

一、明確產品所在容器

首先拋出一個概念：我們的Web產品都是存在于某個容器內部的。乍一看大家估計會有點懵逼，容器是什么？

開發同學都知道容器是個很常用的概念，比如APP端內嵌H5網頁都是基于Webview容器來開發界面和交互的。

對于產品經理來說，只要能夠理解“自己的產品是顯示在相應容器內部并且依賴容器展示界面和功能”這個概念就可以了。

下圖羅列了幾種常見Web產品對應的容器，給大家一個直觀的理解。

二、容器決定產品邊界

由于我們的產品是在容器內部，所以容器的可展示區域(可以簡單理解為webview容器大小)決定了我們產品的顯示區域。

1. 默認狀態下的可展示區域，就是PM經理需要遵循的原型尺寸。
2. 如果容器支持縮放大小，意味著需要考慮原型在不同大小展示區域下的布局效果。
3. 最大的展示區域，往往接近屏幕分辨率。
4. 最小的展示區域，往往是默認的原型尺寸。 部分產品可以縮放得更小，此時展示左上區域或者頁面模塊按一定規則縮小。

三、確定最終原型尺寸

Web產品是指在電腦上使用的各種產品。包括Web網頁端產品、PC客戶端產品(比如釘釘)、平臺產品內第三方應用(比如釘釘)。

這里咱們以“Web網頁端產品”來順著剛剛的邏輯，然后得到最終的原型尺寸(另外2種Web產品類型的原型尺寸，大家有興趣可以自行研究或者期待我的后續文章)

• Web網頁端產品，是放在瀏覽器這個容器里面的。
• 原型尺寸可以采用瀏覽器的默認展示區域，此時接近于屏幕分辨率。
• 為了保證自己的電腦可以查看完整的原型，所以我的Web產品原型尺寸需要小于我的電腦當前的分辨率1440*900px(可在電腦配置中進行調整)。
• 為了保證項目的設計&開發&測試等童鞋可以查看完整的原型，所以我們需要考慮下他們的屏幕分辨率，比如有個1280*800px。
• 當你的產品最終供所有用戶查看，那么需要兼顧大部分用戶的屏幕分辨率，通過查詢當前電腦屏幕分辨率分布情況來查詢出主流屏幕的最小寬度1280px。
• 由于考慮到左右兩側可能還會放置廣告位以及返回頂部等按鈕，原型寬度最好小于1280px。

綜上所述，Web網頁端產品的最佳原型尺寸可以采用寬度1200px，高度自適應。

高度會根據頁面內容多少而經常不同。對于首頁等主要頁面，PM最好考慮首屏內需要露出核心功能內容。此時還需要減掉菜單欄&標題欄&網址欄&書簽欄等高度。

四、如何畫出原型尺寸？

那么如何畫出規范的原型尺寸？接下來我以Axure RP 9.0講解詳細的步驟，并且講述Web網頁端插屏的兩種樣式效果。

1. 頁面寬度1200px，內容1200px；相對瀏覽器居中對齊；如果小于1200px則顯示靠左部分。
2. 頁面寬度無限大，內容1200px；相對瀏覽器居中對齊；如果小于1200px則顯示靠左部分。

4.1 如何畫出指定寬度原型

（1）從默認元件庫拖動“矩形1”到畫布位置(0,0)，修改寬度為1200px，高度根據需求而定。

（2）點擊空白區域，右側邊欄切換到樣式，根據需要設置頁面排列為“靠左對齊”或者保持“居中對齊”(Axure9.0默認居中對齊，Axure8.0默認靠左對齊)。

（3）點擊“預覽”按鈕，然后在瀏覽器中查看效果。

4.2 如何畫出無限寬度原型

本站就是采用了類似的效果，大家可以回到人人首頁看一下。

（4）同時選擇所有元件，右鍵點擊“轉換為動態面板”。

（5）點擊該動態面板，命名為“頂部導航”，勾選“100%寬度(僅瀏覽器中有效)”，填充顏色設為#F2F2F2或者其他顏色。

（6）雙擊該動態面板進入，然后選擇矩形，填充顏色設為同上，線段邊寬修改為0。

（7）點擊“預覽”按鈕，然后在瀏覽器中查看效果。

總結

誠然即使PM不遵循規范的原型尺寸，UI也會替產品考慮并做掉了。但是每個PM應該有這樣的意識。從而減少設計障礙和降低溝通門檻，也能夠提現你這個產品經理的專業度。

需要注意的是：

• 原型尺寸需要兼顧主流的電腦屏幕分辨率，這樣產最終產品顯示的效果最佳。
• 最終產品是通欄平鋪內容(公眾號后臺)還是居中顯示(本站)，并不影響本文結論。

#相關閱讀#

Web后臺產品的列表頁規范

Web后臺產品的詳情頁規范

Web后臺產品的表單頁規范

Web后臺產品的搜索頁規范

#專欄作家#

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

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

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