4-Web、Android、iOS等平臺的設(shè)計規(guī)范和準(zhǔn)則

“UITAPES”視覺設(shè)計元素Footers頁腳Popovers浮窗Forms表格Search搜索Articles文章Background背景Headers頁頭Signup注冊Slideshow幻燈片Borders邊框Breadcrumbs面包屑導(dǎo)航Sort下拉列表Button按鈕Image圖片Calendar日歷Subnavigation二級導(dǎo)航Links鏈接Comments評論Lists列表Tags標(biāo)簽Thumbnail縮略圖Login登錄Tooltips工具提示404Pages出錯頁Audio音頻Icons圖標(biāo)Tabs標(biāo)簽欄Distinction分割Video視頻Modal彈窗Navigation導(dǎo)航Notice提示框Feature焦點圖Pagination分頁導(dǎo)航WebModulePopovers浮窗Forms表格Search搜索Articles文章Background背景Signup注冊Settings面包屑導(dǎo)航Button按鈕Image圖片Compose文本框Comments評論Lists列表Thumbnail縮略圖Login登錄Audio音頻Icons圖標(biāo)Tabs標(biāo)簽欄Modal彈窗Navigation導(dǎo)航Notice提示框Pagination分頁導(dǎo)航MobileModuleFriends好友列表SocialMedia社交功能Loading載入Emptydata空數(shù)據(jù)集Walkthroughs首次演練“WebModule”網(wǎng)頁模塊404Pages出錯頁面404Pages出錯頁面404Pages出錯頁面404Pages出錯頁面Footers頁腳Footers頁腳Popovers浮窗Popovers浮窗Popovers浮窗Forms表格Forms表格Forms表格Search搜索框Search搜索框Article文章Article文章Article文章Breadcrumbs面包屑導(dǎo)航Breadcrumbs面包屑導(dǎo)航Breadcrumbs面包屑導(dǎo)航Audio音頻Audio音頻Background背景Background背景Background背景Header頁頭Header頁頭Signup注冊Signup注冊Signup注冊Slideshow幻燈片Slideshow幻燈片Slideshow幻燈片Slideshow幻燈片Borders邊框Borders邊框Borders邊框Borders邊框Links鏈接Sorts下拉菜單Sorts下拉菜單Button按鈕Button按鈕Button按鈕Button按鈕Image圖片Image圖片Image圖片Calendar日歷Calendar日歷Calendar日歷Subnavigation二級導(dǎo)航Subnavigation二級導(dǎo)航Subnavigation二級導(dǎo)航Tooltips工具提示Tooltips工具提示Tabs標(biāo)簽欄Tabs標(biāo)簽欄Comments評論Comments評論Lists列表Lists列表Lists列表Lists列表Tags標(biāo)簽Tags標(biāo)簽Tags標(biāo)簽Thumbnail縮略圖Thumbnail縮略圖Thumbnail縮略圖Thumbnail縮略圖Login登錄Login登錄Login登錄Login登錄Pagination分頁導(dǎo)航Pagination分頁導(dǎo)航Pagination分頁導(dǎo)航Distinction分割Distinction分割Distinction分割Distinction分割Video播放器Video播放器Video播放器Video播放器Modal彈窗Modal彈窗Modal彈窗Navigation導(dǎo)航Notice提醒Notice提醒Notice提醒Notice提醒Features焦點圖Features焦點圖Features焦點圖Features焦點圖“960GRIDSYSTEM”960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)960GridSystem960柵格系統(tǒng)“ModuleIndex”模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引ModuleIndex

模塊索引Popovers浮窗Forms表格Search搜索Articles文章Background背景Signup注冊Settings面包屑導(dǎo)航Button按鈕Image圖片Compose文本框Comments評論Lists列表Thumbnail縮略圖Login登錄Audio音頻Icons圖標(biāo)Tabs標(biāo)簽欄Modal彈窗Navigation導(dǎo)航Notice提示框Pagination分頁導(dǎo)航MobileModuleFriends好友列表SocialMedia社交功能Loading載入Emptydata空數(shù)據(jù)集Walkthroughs首次演練Popovers浮窗Popovers浮窗Form表格Form表格Actionsheet操作集Actionsheet操作集Friends好友列表Friends好友列表Search搜索Search搜索Setting設(shè)置Setting設(shè)置Share分享Share分享Signup注冊Signup注冊Button按鈕Button按鈕SplashScreen進(jìn)版SplashScreen進(jìn)版Camera相機(jī)Camera相機(jī)TabBar標(biāo)簽欄TabBar標(biāo)簽欄Comments評論Comments評論List列表List列表Loading載入Loading載入Walkthroughs演示W(wǎng)alkthroughs演示“iPhoneGUI”iPhone中的視覺設(shè)計iPhoneGUI

iPhone中的視覺設(shè)計拇指的規(guī)律iPhoneGUI

iPhone中的視覺設(shè)計iPhoneGUI

iPhone中的視覺設(shè)計iPhoneGUI

iPhone中的視覺設(shè)計拇指的規(guī)律iPhoneGUI

iPhone中的視覺設(shè)計iPhoneGUI

iPhone中的視覺設(shè)計神奇數(shù)字4444像素44像素44像素44像素iPhoneGUI

iPhone中的視覺設(shè)計44像素44像素iPhoneGUI

iPhone中的視覺設(shè)計44像素44像素iPhoneGUI

iPhone中的視覺設(shè)計將重要的信息放在頂部，將重要的操作放在底部iPhoneGUI

iPhone中的視覺設(shè)計基于

44像素的設(shè)計韻律進(jìn)行設(shè)計44像素44像素44像素44像素88像素88像素88像素88像素iPhoneGUI

iPhone中的視覺設(shè)計盡量讓一屏顯示完，避免滾動條iPhoneGUI

iPhone中的視覺設(shè)計盡量減少屏幕上的元素iPhoneGUI

iPhone中的視覺設(shè)計將高級工具和操作“藏起來”iPhoneGUI

iPhone中的視覺設(shè)計人類工程學(xué)問題：要考慮你應(yīng)用的手感要將主要操作放置在拇指的“點擊熱區(qū)中”44

是個神奇的數(shù)字。確保點擊區(qū)域至少有44像素大小大膽使用空白。不要讓你的設(shè)計顯得擁擠不堪主要內(nèi)容在上，操作在下主要操作要容易夠著，在切實可行的情況下避免使用滾屏用“秘密面板”、“隱藏之門”將高級工具分散到次級視圖iPhoneGUI

iPhone中的視覺設(shè)計平鋪導(dǎo)航的優(yōu)缺點優(yōu)點很適合少而精的內(nèi)容個，適于隨意瀏覽的頁面適于內(nèi)容自定義，且數(shù)量可變的頁面易于使用，只需熟悉的滑動手勢即可導(dǎo)航頁面占用空間少，頁面分頁控件只占用一點空間，給內(nèi)容該留下更多余地iPhoneGUI

iPhone中的視覺設(shè)計平鋪導(dǎo)航的優(yōu)缺點缺點每次只能翻過一頁，沒法立即跳到非相鄰頁并不能適應(yīng)較多的頁面數(shù)量，頁面指示器只能容下20個小點難以包含滾屏，對長文本不利頁面指示器太小，可能被用戶忽略，因此讓用戶錯過應(yīng)用的其他頁面iPhoneGUI

iPhone中的視覺設(shè)計標(biāo)簽欄的優(yōu)缺點優(yōu)點點擊一次即可訪問到應(yīng)用所有的主要功能標(biāo)注清晰的菜單，告知用戶主要功能和當(dāng)前所在功能缺點只能顯示5個標(biāo)簽一個用的每個頁面都會被明顯占據(jù)一定的屏幕空間iPhoneGUI

iPhone中的視覺設(shè)計樹形結(jié)構(gòu)的優(yōu)缺點優(yōu)點能應(yīng)變大量的類別，功能和項目組織方式常見，容易理解可直接對內(nèi)容進(jìn)行交互。直觀且占用屏幕空間小列表展示很適于用戶自定義分類iPhoneGUI

iPhone中的視覺設(shè)計樹形結(jié)構(gòu)的優(yōu)缺點缺點主要功能只有在最頂層頁面才會被顯示出主要功能和分類直接切換有點麻煩。必須先回到頂層空間，然后再依次點入iPhoneGUI

iPhone中的視覺設(shè)計遵循普通，不見得別人就會覺得普通。要有“蘋果味”的設(shè)計感蘋果內(nèi)置的導(dǎo)航模型基本上可以解決大多數(shù)應(yīng)用的結(jié)構(gòu)問題。把你的頁面都畫成故事版，用這種方式來規(guī)劃出應(yīng)用的清晰流程。開始丑點沒關(guān)系。先從原始的原型應(yīng)用開始，然后再做詳細(xì)設(shè)計，然后編碼iPhoneGUI

iPhone中的視覺設(shè)計多用標(biāo)準(zhǔn)控件，一致性將增加可靠性屏幕上不能超過兩條“欄”——上邊導(dǎo)航欄，下邊就是標(biāo)簽欄或工具欄。多用表格視圖。表格視圖是最具普適性的iphone標(biāo)準(zhǔn)界面元素認(rèn)真為每個文本輸入框選好鍵盤，選擇是否開啟自動糾錯功能iPhoneGUI

iPhone中的視覺設(shè)計認(rèn)真為每個文本輸入框選好鍵盤，選擇是否開啟自動糾錯功能iPhoneGUI

iPhone中的視覺設(shè)計觸動人心的設(shè)計會讓應(yīng)用魅力十足。在開始設(shè)計前，為你的應(yīng)用選好個性方向在標(biāo)準(zhǔn)控件上使用自定義顏色或圖形，能讓控件煥然一新。奢華的材質(zhì)能增加你應(yīng)用的感知價值，逼真的界面元素讓用戶有點擊的欲望圖標(biāo)重在意義清晰而不是個性。圖標(biāo)干凈的輪廓勝過浮華的細(xì)節(jié)從真實世界借鑒界面隱喻，但是要確保借鑒的應(yīng)用能適合于手機(jī)iPhoneGUI

iPhone中的視覺設(shè)計觸動人心的設(shè)計會讓應(yīng)用魅力十足。在開始設(shè)計前，為你的應(yīng)用選好個性方向在標(biāo)準(zhǔn)控件上使用自定義顏色或圖形，能讓控件煥然一新。奢華的材質(zhì)能增加你應(yīng)用的感知價值，逼真的界面元素讓用戶有點擊的欲望圖標(biāo)重在意義清晰而不是個性。圖標(biāo)干凈的輪廓勝過浮華的細(xì)節(jié)從真實世界借鑒界面隱喻，但是要確保借鑒的應(yīng)用能適合于手機(jī)iPhoneGUI

iPhone中的視覺設(shè)計iPhone的小號圖標(biāo)iPad的小號圖標(biāo)iPhone4的小號圖標(biāo)iPhone的中號圖標(biāo)iPad的中號圖標(biāo)iPhone4

的中號圖標(biāo)大號圖標(biāo)29X2948X4858X5857X5772X72114X114512X512iPhoneGUI

iPhone中的視覺設(shè)計應(yīng)用的圖標(biāo)要清晰明了，用來描述應(yīng)用的功能、界面、名稱或品牌在圖標(biāo)設(shè)計中，要加強(qiáng)主輪廓名稱短才是好的把啟動圖像做成假的應(yīng)用背景，這樣可以減少啟動的感知時間iPhoneGUI

iPhone中的視覺設(shè)計手勢來源于經(jīng)驗。大家是如何觸摸現(xiàn)實物體的，是如何用鼠標(biāo)控制指針的？觀察大家如何使用你的應(yīng)用，然后來添加觀察到的應(yīng)用到相應(yīng)的手勢。為沒有發(fā)現(xiàn)你應(yīng)用手勢的人，準(zhǔn)備好備用方案。所有的手勢操作都應(yīng)該能通過可見的控件來完成除了用來觸發(fā)撤銷/重做對話框或某些新奇用法以外，要避免使用搖動手勢提供多點觸摸手勢的同時，也要提供單指手勢作為替代給手勢稍加點難度，或使用點擊組合，以此來防止意外的誤點擊發(fā)生iPhoneGUI

iPhone中的視覺設(shè)計在應(yīng)用不能繼續(xù)運行的緊急情況，或應(yīng)用需要用戶授權(quán)應(yīng)用的情況下，才使用警告框在警告框消息中，要淡定地把事情說清楚。用菊花轉(zhuǎn)和模態(tài)按鈕來安撫用戶，告訴他們應(yīng)用正在努力運行中使用進(jìn)度條、娛樂項目、預(yù)載內(nèi)容的方式，讓你的應(yīng)用看起來運行得更快不要自己搞一套聯(lián)系人、日歷事件或照片應(yīng)用。要使用全系統(tǒng)通用的。iPhoneGUI

iPhone中的視覺設(shè)計iPhoneGUI

iPhone中的視覺設(shè)計副標(biāo)題樣式A：這種單元格的布局對長文本說明很有用。用在內(nèi)容較多的應(yīng)用中，可以用來預(yù)覽下一屏的內(nèi)容，同時也可節(jié)省了時間。副標(biāo)題用灰色的小字展示。iPhoneGUI

iPhone中的視覺設(shè)計副標(biāo)題樣式B：主標(biāo)題在單元格左邊，藍(lán)色的詳情文字緊貼在右邊。這種處理方式在設(shè)置等場景下十分有用。粗體的主標(biāo)題同時也是詳情文本的表單標(biāo)簽。這種樣式空間有限，要盡量保持文本簡短，不要在單元格里使用圖片。iPhoneGUI

iPhone中的視覺設(shè)計副標(biāo)題樣式C：藍(lán)色的主標(biāo)題文字用作了詳情文本的表單標(biāo)簽，但是視覺中心和藍(lán)色文本樣式正好相反。如圖，主標(biāo)題在左側(cè)是藍(lán)色的，然后詳情文本在主標(biāo)題的右側(cè)，左對齊，是主要值。把這些表格單元格放在一起就組成了整齊的帶標(biāo)簽的輸入框?！奥?lián)系人”應(yīng)用就是一個很好的例子。（抱歉）這里也不能放置圖片。iPhoneGUI

iPhone中的視覺設(shè)計i