農(nóng)副產(chǎn)品市場(chǎng)手機(jī)站設(shè)計(jì)頁面要求及規(guī)范

農(nóng)副產(chǎn)品市場(chǎng)手機(jī)站設(shè)計(jì)頁面是有一般的要求及規(guī)范的，但很多人其實(shí)并不了解。建網(wǎng)站雖說是建站公司的事情，但是作為手機(jī)網(wǎng)站實(shí)際的擁有者，還是應(yīng)該了解一些的。在這里，易銷互聯(lián)網(wǎng)科技給大家歸納了一下，主要是有以下幾個(gè)方面，希望能夠給大家一些幫助。

農(nóng)副產(chǎn)品市場(chǎng)在設(shè)計(jì)頁面的時(shí)候一定不會(huì)少，雖說比較多，但是主要還是分為8類頁面：歡迎頁、首頁、菜單框、注冊(cè)與登錄、彈出窗口、動(dòng)態(tài)展示交互、詳細(xì)頁、搜索頁。

農(nóng)副產(chǎn)品市場(chǎng)手機(jī)站設(shè)計(jì)尺寸規(guī)范

狀態(tài)欄(status bar)、導(dǎo)航欄(navigation)、主菜單欄(submenu)、內(nèi)容區(qū)域(content)。

Logo出矢量圖512*512 icon:29*29 72*72 512*512

iphone

窗體頂端

1.尺寸以及分辨率

320*480，640*960，640*1136 網(wǎng)頁和移動(dòng)的UI用72px

2.界面基本組成元素

　　iPhone的APP界面一般由狀態(tài)欄、導(dǎo)航欄、主菜單欄和中間的內(nèi)容區(qū)域組成。因?yàn)閷挾仁枪潭ǖ模�所以設(shè)計(jì)開發(fā)起來很方便。下面我們說說這些“欄”的尺寸吧：

狀態(tài)欄：高度 40px

導(dǎo)航欄：高度 88px

主菜單欄：高度 98px；

內(nèi)容區(qū)域：高度為：734px

如果640*1136是910px

iPhone5/5s的640*1136的尺寸，其實(shí)就是中間的內(nèi)容區(qū)域高度增加到910px。

3.字體

窗體頂端

32~36px 32px，注釋等提示文本28px。

窗體底端

窗體頂端

不同則img-line.png，img-line@2x.png

窗體頂端

Android

1.尺寸以及分辨率

提到Android的尺寸，480*800、720*1280。點(diǎn)9切圖所有手機(jī)的適配。

Android界面尺寸：480*800、720*1280、1080*1920。

2.界面基本組成元素

與ios的一樣，還是有狀態(tài)欄、導(dǎo)航欄和主菜單欄，以720*1280的尺寸,狀態(tài)欄的高度應(yīng)為50px，導(dǎo)航欄的高度96px，主菜單欄的高度96px。內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038) 窗體底端

Android系統(tǒng)采用可自適應(yīng)的屏幕支持,由于屏幕尺寸種類繁多,簡(jiǎn)單可歸為ldpi(240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280)

字體：android原生的字體，與微軟雅黑很像。字體大小范圍為16px~32px

IOS：寬度640PX 高度1136px

iOS屏幕尺寸有這幾種：320*480，960*480，1024*768

機(jī)網(wǎng)站開發(fā)_國互網(wǎng)窗體底端

Ipad端

iPad界面尺寸：1024*768、2048*1536

單位：像素72dpi，在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)來設(shè)計(jì)，比較方便預(yù)覽效果，一般用640*960或者640*1136的尺寸來設(shè)計(jì)。

　單位

iOS的尺寸單位為pt，Android的尺寸單位為dp�！　�

單位之間的換算關(guān)系隨倍率變化：

　　1倍：1pt=1dp=1px(mdpi、iPhone 3gs)

　　1.5倍：1pt=1dp=1.5px(hdpi)

　　2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

　　3倍：1pt=1dp=3px(xxhdpi、iPhone 6)

　　4倍：1pt=1dp=4px(xxxhdpi)

單位決定了我們的思考方式。我們?cè)?span style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; line-height: 25.6px; white-space: normal; color: rgb(255, 0, 0);">農(nóng)副產(chǎn)品市場(chǎng)手機(jī)站設(shè)計(jì)和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計(jì)Android應(yīng)用時(shí)，有的設(shè)計(jì)師喜歡把畫布設(shè)為1080x1920，有的喜歡設(shè)成720x1280。給出的界面元素尺寸就不統(tǒng)一了。Android的較小點(diǎn)擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。

農(nóng)副產(chǎn)品市場(chǎng)手機(jī)站設(shè)計(jì)頁面所用版式常規(guī)的有六種：列表式（搜索產(chǎn)品和新聞模塊）、、抽屜式（產(chǎn)品模塊）、圖表式（圖表模塊）、行為擴(kuò)展式、彈出式（彈出頁面）、圖片滑動(dòng)式（banner 或產(chǎn)品）。

易銷互聯(lián)網(wǎng)科技十年電商經(jīng)驗(yàn)，專業(yè)手機(jī)站設(shè)計(jì)，如果您有任何有關(guān)網(wǎng)站設(shè)計(jì)疑問，都可以來此咨詢。