IOSiPhone設(shè)計規(guī)范PPT課件

1、中國互聯(lián)網(wǎng)+高端教育品牌,第3-4章 ios設(shè)計規(guī)范,中國：全球最大的智能手機市場 手機超越臺式電腦，成為中國最大的上網(wǎng)終端。 國內(nèi)安卓系統(tǒng)86.4%的占有量,目錄,1. 什么是App？ 2. 蘋果發(fā)展 3. iPhone界面設(shè)計規(guī)范 4. 項目案例,一、什么是APP： App是英文Application的簡稱,由于iPhone智能手機的流行,現(xiàn)在的APP多指智能手機的第三方應(yīng)用程序。,APP,目前比較著名的App商店： Apple的iTunes商店里面的AppStore, Android的GooglePlayStore, 諾基亞的ovistore, Blackberry用戶的,BlackBe

2、rryAppWorld.。,APP商店,三大平臺的設(shè)計規(guī)范，其實我個人覺得掌握了2個平臺的規(guī)范即可，一個是Android， 另一個就是IOS，這2大平臺目前市場占有率是蠻高的，第三個就是微軟的Windows Phone了。 不過在接觸的項目中，設(shè)計這個平臺的還不算多。 另外建議，蘋果Watch這些也要了解下。,蘋果的iOS系統(tǒng),app格式有ipa,pxl,deb, 谷歌的Android系統(tǒng),app格式為APK, 諾基亞的S60系統(tǒng),APP格式有sis,sisx。,App格式,二、蘋果發(fā)展： 蘋果公司（Apple Inc. ）是美國的一家高科技公司。由史蒂夫喬布斯、斯蒂夫沃茲尼亞克和羅韋恩(Ro

3、n Wayne)等三人于1976年4月1日創(chuàng)立，并命名為美國蘋果電腦公司（Apple Computer Inc. ）， 2007年1月9日更名為蘋果公司。 蘋果公司在高科技企業(yè)中以創(chuàng)新而聞名，知名的產(chǎn)品有Apple II、Macintosh電腦、Macbook筆記本電腦、iPod音樂播放器、iTunes商店、iMac一體機、iPhone手機和iPad平板電腦等。2012年8月21日，蘋果成為世界市值第一的上市公司。,蘋果公司（Apple Inc. ）,1976 蘋果第一代標志,1976年-1998年第二代標志,當前蘋果logo,蘋果早期電腦,1977 AppleI,1977 AppleII,蘋

4、果早期電腦,1980 AppleIII,后期,iMac,1997年發(fā)布彩色iMac電腦,MacBook,iOS 6操作系統(tǒng)（2012年6月12日發(fā)布）,iOS 10操作系統(tǒng)（2016年6月13日發(fā)布）,iPhone發(fā)展歷程：,iPhone發(fā)展歷程,2007年1月09日 iPhone 2007年6月29日 iPhone2G 2008年7月11日 iPhone3G 2009年6月09日 iPhone3GS 2010年6月08日 iPhone4 2011年10月05日 iPhone4S 2012年9月13日 iPhone5 2013年9月20日 iPhone5S 2013年9月11日 iPhone5

5、C 2014年9月9日 iPhone6 iPhone6 Plus 2015年9月10日 iPhone6S iPhone6S Plus 2016年9月8日 iPhone7 iPhone7 Plus,iPhone界面設(shè)計規(guī)范,iPhone SE,三、iPhone界面設(shè)計規(guī)范：,ios新特性,為ios而設(shè)計，ios新特性,遵從：UI能夠更好地幫助用戶理解內(nèi)容并與之互動，但卻不會分散用戶對內(nèi)容本身的注意力。 清晰：各種大小的文字應(yīng)易讀，圖標應(yīng)該醒目，去除多余的修飾，突出重點，很好的突出設(shè)計理念。 深度：視覺的層次和生動的交互動作會賦予UI新的活力，不但幫助用戶更好理解新UI的操作并讓用戶在使用的過程中

6、感到驚喜。,首先，去除了UI元素讓應(yīng)用的核心功能呈現(xiàn)的更加直接并強調(diào)其相關(guān)性。 其次，直接使用iOS的系統(tǒng)主題讓其成為應(yīng)用的UI，這樣能給用戶統(tǒng)一的視覺感受。 最后，保證你設(shè)計的UI可以適應(yīng)各種設(shè)備和不同的操作模式，這樣用戶可以在不同的場景下舒適地享用你的應(yīng)用,以內(nèi)容為核心,充分利用屏幕 盡量減少視覺修飾和擬物化設(shè)計的使用 嘗試使用半透明底板,保證清晰度,使用大量留白 讓顏色簡化UI 通過使用系統(tǒng)字體確保易讀性 使用無邊框的按鈕,用深度來體現(xiàn)層次,半透明背景浮層來區(qū)分和其余部分的內(nèi)容 以不同的層級展示 使用無邊框的按鈕,適應(yīng)性布局,iPhone的顯示環(huán)境可根據(jù)不同的設(shè)備和不同的握持方向而改變。

7、,界面布局體驗,布局包含的不僅僅是一個應(yīng)用屏幕上的UI元素外觀。 提升重要內(nèi)容或功能，讓用戶容易集中注意在主要任務(wù)上。 使用視覺化的重量和平衡向用戶展示相關(guān)的屏顯重要元素。 盡量避免UI上不一致的表現(xiàn)。,界面布局體驗,給每個互動的元素充足的空間，從而讓用戶容易操作這些內(nèi)容和控件。 普通屏幕常用的點按類控件的大小是44X44px。,界面布局體驗,標準手勢,可交互元素吸引用戶點擊,為了暗示交互性，設(shè)計時會使用很多的線索，包括顏色、位置、上下文、表意明確的圖標和標簽等。,輸入信息的方式要簡單,讓用戶更容易的進行選擇。,動畫,謹慎地增加動畫，特別是在那些無法提供沉浸性體驗的應(yīng)用中。 在合適的時候，使自

8、定義的動畫與內(nèi)置動畫保持一致。 使用風(fēng)格類型一致的動畫。,品牌推廣,品牌推廣并不僅僅是在應(yīng)用中展示品牌的顏色和Logo。 理想狀態(tài)下，你開發(fā)的某個特定品牌的應(yīng)該通過創(chuàng)建獨特的外觀和感覺來為用戶提供難忘的體驗。,色彩,如果你要創(chuàng)建多樣的自定義顏色，要確保它們能夠和諧共存。 注意在不同情境下的顏色對比。,字體,iPhone上的字體英文為HelveticNeue。 中文Mac下是黑體，Win下可以用華文黑體，或者方正黑體簡體，或者蘋方。 字體的大小沒有嚴格的標準，一般標題為32-36px，正文內(nèi)容為24-30px，輔助文字為20px或18px。 （一種簡單方法是找個不錯的APP，截圖后放進PS參考里

9、面的字體大?。?設(shè)計規(guī)范,1. 所有部件的尺寸必須是雙數(shù) 2. 字號規(guī)范 大：32/34/36 正文：30/28/24/22 輔助提示：18/20 3. 普通屏幕下，最小觸控點為44*44；Retain屏幕下，可點擊部件不小于88px是在不夠大的，可以在切圖時用空白（透明）空間補足。 4. 常用灰色背景色#eeeeee; 1像素線常用色值為#e8e8e8；常用灰色文字：#333 /6 /9 如果背景為白色，1像素線也可為#eeeeee 5. 除了廣告圖片，其他部件最好用形狀工具繪制 6. 設(shè)計時，可點擊的部件盡量和四周邊框保持一定距離（一般控制左右20-30px的空間） 7. 設(shè)計時，要保持一

10、個使用者而非設(shè)計者的思想。因為手機的可顯示范圍小，所以布局的時候要考慮邏輯性，比如什么時候需要標簽欄，什么頁面需要標簽按鈕，都需要好好考慮在使用中的意義 8. 模塊常用間距20-30px,iOS規(guī)范,界面尺寸,界面尺寸,界面尺寸,一、需要提供給程序的切圖文件為：,二、設(shè)計圖中需要切出來的元素： （右圖所示）,工作流程,作業(yè)：途牛旅游,THANKS!,蘋果的iOS系統(tǒng),app格式有ipa,pxl,deb, 谷歌的Android系統(tǒng),app格式為APK, 諾基亞的S60系統(tǒng),APP格式有sis,sisx。,App格式,蘋果早期電腦,1980 AppleIII,后期,iOS 10操作系統(tǒng)（2016年

11、6月13日發(fā)布）,iPhone發(fā)展歷程：,iPhone發(fā)展歷程,2007年1月09日 iPhone 2007年6月29日 iPhone2G 2008年7月11日 iPhone3G 2009年6月09日 iPhone3GS 2010年6月08日 iPhone4 2011年10月05日 iPhone4S 2012年9月13日 iPhone5 2013年9月20日 iPhone5S 2013年9月11日 iPhone5C 2014年9月9日 iPhone6 iPhone6 Plus 2015年9月10日 iPhone6S iPhone6S Plus 2016年9月8日 iPhone7 iPhone7 Plus,iPhone界面設(shè)計規(guī)范,首先，去除了UI元素讓應(yīng)用的核心功能呈現(xiàn)的更加直接并強調(diào)其相關(guān)性。 其次，直接使