<tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
    <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
    <em id="fuft6"><acronym id="fuft6"></acronym></em>
          <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>
          首頁技術文章正文

          產品經理畫移動端原型時需要注意哪些問題?

          更新時間:2020-07-03 來源:黑馬程序員 瀏覽量:

          很多產品經理在企業中做移動端的原型時,被UI噴的體無完膚:“你這是原型嗎?”“你怎么連基本的對齊都做不到?”“這兩個按鈕,倒是哪個是一級按鈕,哪個是次級的?”“你這原型太丑了,我用不了!”

          一般來說,在企業中制作移動端的原型,都是制作iOS版本的;本文也是基于此,跟大家探討一些iOS原型制作的規范。

          (1)原型大小,指的是在Axure中對應的長寬。規范的移動端頁面大小為:寬度375*高度667(單位為px,本文中,所有的數字單位均為px,隱去不寫),當然,如果頁面比較長,比如首頁,可以無視667這個要求,把該有的內容都制作出來即可。

          這里需要注意的是,如果原型的高度是超過667,需要保證標簽欄仍然在最底部,而且按規范去制作。如下圖一:

          1593741833166_產品經理移動原型.jpg

          圖一

          (2)部分模塊的規范要求。移動端的頁面,iOS人機交互指南中,針對重要模塊是有明確要求的;比如說,頂部的狀態欄(顯示信號、時間、電量的區域),原型高度為20;狀態欄下方的導航欄(顯示返回、搜索框等內容),原型高度為44;底部標簽欄(比如微信APP底部的微信、通訊錄、發現、我),原型高度為49,圖標大小為25*25,字號為10號。如下圖二:

          1593741841740_產品經理移動原型2.jpg

          圖二

          可能有的人就要說了,一定要按照這個標準嗎?我把底部狀態欄畫成60高度不可以嗎?我把頂部狀態欄高度畫成40不可以嗎?可以,沒有問題。但是,如果這樣做了,你的原型一定觀感不好(就是,別人一看就很low的意思)。

          為什么一定要遵循這些規范,這個是蘋果官方每年將體驗最好的APP選出來,然后總結他們的設計規范得出來的,如果你按照這個規范來制作APP,畫原型,那根據你的原型制作出來的產品,體驗就是最好的。

          (3)很多產品經理在畫原型的時候,線條感太重,比如下圖,該怎么處理呢?如下圖三:

          1593741850639_產品經理移動原型3.jpg

          圖三

          其實,比較簡單,在制作原型時,通過給元件填充一些不同飽和度的灰色進行區分,這樣不僅去掉了元件的邊框(降低了線條感),同時原型整體的效果更好,如下圖四:

          1593741860114_產品經理移動原型4.jpg

          圖四

          (4)很多產品經理的原型在制作的時候沒問題,但是一旦預覽就開始出現不對齊、文字排版混亂等異常情況。我們先說一下原因吧:因為當原型中文字過小時,在預覽的情況下,瀏覽器會自動對文字進行放大的處理,保證能夠閱讀。那處理辦法是什么?很簡單,導出圖片。

          下圖五為原型的導出內容截圖,圖六為原型的導出圖片效果。

          1593741869382_產品經理移動原型5.jpg

          圖五

          1593741878648_產品經理移動原型6.jpg

          圖六

          今天就跟大家分享上面的四個方面,希望大家在以后制作移動端原型過程中,能夠盡量避免以上的錯誤出現,盡量遵守規范去制作。

          目前黑馬程序員的產品經理學科正在火熱招生中,并且上海校區和深圳校區已經全面恢復線下。如果感興趣的小伙伴可以來看看,我們有專業的師資團隊給大家授課,并且輔導大家就業,大家快來吧!


          猜你喜歡:

          你的原型今天被吐槽了嗎? 

          數據埋點基礎:術語和埋點方式 
          2020年產品經理5.0課程


          在線咨詢 我要報名
          和我們在線交談!

          黄色网站片

          <tbody id="fuft6"><noscript id="fuft6"><video id="fuft6"></video></noscript></tbody>
            <tbody id="fuft6"><noscript id="fuft6"></noscript></tbody>
            <em id="fuft6"><acronym id="fuft6"></acronym></em>
                  <button id="fuft6"><acronym id="fuft6"><u id="fuft6"></u></acronym></button>