講座itcast網(wǎng)站頁(yè)面ui設(shè)計(jì)

G.界面設(shè)計(jì)標(biāo)準(zhǔn)（以iOS7的iPhone界面為例）感謝wangxiaohui6687圖標(biāo)設(shè)計(jì)規(guī)范下表列出了圖標(biāo)的標(biāo)準(zhǔn)尺寸，按照此規(guī)范作圖，可以使圖標(biāo)能在搭載IOS7的多種設(shè)備中正確顯示顯示。（單位：px）描述iPhone5和iPodtouch的尺寸（高清晰度）大小為iPhone和iPodtouch（高分辨率）iPad的尺寸為（高清晰度）大小為iPad2和iPad迷你（標(biāo)準(zhǔn)分辨率）應(yīng)用程序圖標(biāo)120×120120×120152×15276×76為AppStore1024×10241024×10241024×10241024×1024啟動(dòng)影像640×1136640×9601536×2048（縱向）2048×1536（橫向）768×1024（縱向）1024×768（橫向）Spotlight搜索結(jié)果圖標(biāo)（推薦）80×8080×8080×8040×40設(shè)置圖標(biāo)（推薦）58×5858×5858×5829×29工具欄和導(dǎo)航欄圖標(biāo)（可選）約44×44約44×44約44×44約22×22標(biāo)簽欄圖標(biāo)（可選）約60×60（最大：96×64）約60×60（最大：96×64）約60×60（最大：96×64）約30×30（最大：48×32）默認(rèn)報(bào)刊亭蓋為AppStore圖標(biāo)（書(shū)報(bào)亭應(yīng)用程序所需）至少為1024像素的最長(zhǎng)邊至少為1024像素的最長(zhǎng)邊至少為1024像素的最長(zhǎng)邊至少為1024像素的最長(zhǎng)邊網(wǎng)頁(yè)剪輯圖標(biāo)（推薦的Web應(yīng)用程序和網(wǎng)站）120×120120×120144×14472×72圖標(biāo)設(shè)計(jì)線條畫(huà)，而激活圖標(biāo)則增加填充，未激活狀態(tài)的線條消失或者反白。如下圖：字體字號(hào):HelveticaNeue仍舊是iOS的默認(rèn)字體，但普通文本通常是以細(xì)體字展示，而不是常規(guī)或粗體。需要突出強(qiáng)調(diào)的文本通常用的是中粗字體（例如，導(dǎo)航欄標(biāo)題）標(biāo)題類型默認(rèn)字體大小默認(rèn)字體類型導(dǎo)航欄標(biāo)題34px中等普通按鈕34px細(xì)體表格頭部34px細(xì)體表格標(biāo)簽28px常規(guī)頁(yè)簽欄文字20px常規(guī)98px640px表單導(dǎo)航欄1.桌面啟動(dòng)應(yīng)用程序圖標(biāo)更新到iphone:120X120px，ipad:152x152px；2.啟動(dòng)畫(huà)面要添加回statusbar（頂部狀態(tài)欄）；3.viewcontroller用full-screenlayout；4.重新設(shè)計(jì)barbutton圖標(biāo)（線條化）；5.按鈕要使用無(wú)邊化（多為文字直接作為按鈕）；6.使用相對(duì)布局，autolayout，盡量不要寫(xiě)死坐標(biāo)和大?。ㄊ欠耦A(yù)示著大屏iphone的到來(lái)？）；7.用戶可自定義字號(hào)；8.注意底部手勢(shì)的使用，IOS7將優(yōu)先響應(yīng)系統(tǒng)的控制面板（從底部上滑手勢(shì)，喚出系統(tǒng)控制面板，

軟件內(nèi)部謹(jǐn)慎使用）；9.盡量去特效化去擬物化，保持界面元素平滑和層次感（這就是簡(jiǎn)約設(shè)計(jì)的難點(diǎn)了）；10.在application:didFinishLaunchingWithOptions:里判斷版本6or7來(lái)載入相關(guān)資源（IOS6

可以和IOS7呈現(xiàn)不同的UI效果）；11.狀態(tài)爛透明，其它bar都是半透明的；UIBarPositionTopAttached代表bar背景延伸到statusbar，總高128px（導(dǎo)航欄高度高度加狀態(tài)欄）,UIBarPositionTop代表不延伸；12.NavigationBar默認(rèn)是半透明，底部有1像素的hairline；tintColor去定義barbutton,用barTintColor去定義bar背景。如果要用自定義的返回按鈕，需要做一個(gè)MASK圖像作為切換過(guò)渡用。NaviBar的下部