• 
• 
• 
• 
• 
• 
• 

知識普及 ? 關(guān)于iOS7的設(shè)計方面變化

關(guān)于iOS7的設(shè)計方面變化

網(wǎng)頁設(shè)計師 于2016-08-31 18:46發(fā)表 閱讀次數(shù) 2753次

距離iphone7正式發(fā)布會還有不到一個月時間，在今年的WWDC上，蘋果推出了采用全新設(shè)計語言打造的iOS7。新系統(tǒng)棄用了諸如皮革、木質(zhì)一類的偽3D擬真效果，取而代之的是更加簡潔輕量的設(shè)計路線，其中文字排版成了重頭戲，另外在某些方面也受到了扁平化設(shè)計的影響。 　　對于負責(zé)打造iOS應(yīng)用界面的設(shè)計師們來說，長久以來的設(shè)計習(xí)慣和規(guī)則即將被改變。我們分析了蘋果的iOS7UI過渡指南，并從中挑選出了網(wǎng)頁設(shè)計師們需要知道的最重要的10條設(shè)計方面的變化。希望你能通過本文了解到iOS7的這些新特性將會怎樣影響到你的內(nèi)容呈現(xiàn)方式。 　　1.三大設(shè)計主題 　　根據(jù)蘋果官方的設(shè)計規(guī)范，設(shè)計師們需要遵守三點最核心的設(shè)計主題： 　　依從：UI要幫助用戶對內(nèi)容進行理解和互動，但絕不能與內(nèi)容產(chǎn)生競爭關(guān)系。 　　清晰：任何字號的文字都要清楚易讀，圖標要精細且含義明確，裝飾性元素要少而精，且使用得當；聚焦于功能性的實現(xiàn)，并以此激發(fā)設(shè)計的進行。 　　縱深：視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力，使界面更容易被理解，并提升用戶的愉悅度。 　　蘋果希望你在設(shè)計應(yīng)用的界面和交互模式時密切關(guān)注這些設(shè)計主題，特別是“依從”。它著重強調(diào)了怎樣使設(shè)計更好地支持內(nèi)容，而不是反過來壓制內(nèi)容。 　　可以看看蘋果是怎樣在iOS7內(nèi)置的日歷應(yīng)用當中貫徹這一點的。新的日歷應(yīng)用在界面上極大的簡化了，去除了一切不必要的設(shè)計元素，并使用了干干凈凈的白色背景，完全以內(nèi)容為中心。 　　2.動態(tài)字體 　　iOS7使用了全新的動態(tài)字體系統(tǒng)，以改善文字內(nèi)容在任何字號下的易讀性。 　　動態(tài)字體可以自動調(diào)整任何字號下的文字粗細、字間距和行距。它同時支持字體風(fēng)格，使你能夠為內(nèi)容標題、正文和按鈕當中的文字設(shè)置不同的樣式。 　　新的天氣應(yīng)用為我們展示了新的字體以及清晰的文字排版在使用了動態(tài)背景的全屏視圖當中的表現(xiàn)。 　　3.導(dǎo)航元素的半透明化 　　iOS7當中最重要的設(shè)計變化之一就是在界面中引入了透明與半透明化。 　　狀態(tài)欄(statusbar)能夠以完全透明的形式呈現(xiàn)，導(dǎo)航欄(navigationbar)、標簽欄(tabbar)、工具欄(toolbar)和其他一些控件也采用了半透明化的處理方式。因此，你可能需要調(diào)整內(nèi)容視圖在縱向上的實際尺寸，以便在半透明控件的下方將內(nèi)容上下文隱約地展示給用戶。 　　另外你也要考慮到全新的控制中心(controlcenter)，用戶可以在這里快速訪問到一些常用功能，例如開啟藍牙、調(diào)整屏幕亮度等等?？刂浦行氖且环N模態(tài)視圖(modalview)，它會隨著用戶的手勢從屏幕底部向上展開，并覆蓋在系統(tǒng)界面或當前應(yīng)用界面之上；用戶可以透過其半透明毛玻璃背景看到下方界面中的內(nèi)容環(huán)境。 　　4.按鈕去掉了邊框 　　iOS7里的按鈕不再有邊框和背景。這使得按鈕中的標題文字可以使用相對大一些的字號，但對于那些經(jīng)過自定義設(shè)計的按鈕來說，你需要重新考慮它們的樣式能否適用于新的系統(tǒng)風(fēng)格。 　　蘋果在iOS7當中加入了右滑切換界面的手勢。切換過程中，導(dǎo)航欄會展現(xiàn)出精巧的界面覆蓋疊加效果。如果你為導(dǎo)航欄中的按鈕使用了自定義設(shè)計的背景圖片，那么現(xiàn)在你需要創(chuàng)建一個蒙版圖片來確保這種動畫效果的實現(xiàn)。詳見iOS7UI過渡指南之BarsandBarButtons一節(jié)。 　　iOS7的標簽欄和工具欄也有了全新的外觀，對于其中的圖標，你可能需要重新繪制一套更簡潔、更線條化的圖片了。 　　你可以在iOS7自帶的短信應(yīng)用當中看到最官方的按鈕使用示例，包括導(dǎo)航欄中的新消息按鈕、返回到消息列表的按鈕、聯(lián)系人按鈕、發(fā)送按鈕等。 　　5.屏幕上更多的可用空間 　　透明的狀態(tài)欄，移除了左右邊距和邊框的界面，這些新風(fēng)格體現(xiàn)出蘋果正在鼓勵設(shè)計師們將界面中的內(nèi)容擴展至屏幕邊緣。 　　例如系統(tǒng)鍵盤一類的模態(tài)視圖都采用了半透明的風(fēng)格，使得它們底部的內(nèi)容元素可以被用戶體驗感知到，即使模糊不清，也可以傳遞出縱深的含義。系統(tǒng)內(nèi)置的天氣、照片和相機應(yīng)用都非常好的展示了怎樣使用全屏風(fēng)格展示內(nèi)容。 　　6.向擬物化說不 　　根據(jù)“依從”原則所提倡的，蘋果在設(shè)計規(guī)范中進一步強烈建議設(shè)計師們“避免仿真和擬物化的視覺指引形式”。用戶界面應(yīng)該是一種圍繞著內(nèi)容而存在的支持結(jié)構(gòu)，不要喧賓奪主。 　　簡單的說，這意味著蘋果不再愿意看到3D質(zhì)感的按鈕，以及漸變、投影等其他擬物化的設(shè)計元素，因為這樣的元素會導(dǎo)致“UI元素過重，以至于壓倒內(nèi)容”。 　　雖然交互元素要輕量化，但44像素的最小點擊區(qū)域規(guī)則依然有效，你不能寄希望于用戶能夠精準的點擊到小于44像素見方的界面元素。 　　關(guān)于移除擬物化風(fēng)格的設(shè)計方式，可以參考iOS7內(nèi)置的GameCenter、日歷和Podcast應(yīng)用。 　　7.通過深度傳遞層次 　　iOS7最吸引人的設(shè)計之一就是系統(tǒng)界面當中由加速計驅(qū)動的3D效果。隨著設(shè)備在物理空間當中的移動，圖標與背景圖片會展示出視差效應(yīng)。這是iOS7三大設(shè)計主題當中的第三點的典型示例： 　　縱深：視覺外觀的層次以及逼真的動畫效果可以傳達出界面的活力，使界面更容易被理解，并提升用戶的愉悅度。 　　自然，蘋果也希望應(yīng)用設(shè)計師們采用相同的方式，通過半透明及動畫效果來展示界面和元素之間的層級關(guān)系。這是應(yīng)用設(shè)計理念的一次重大飛躍，而且隨著iOS7的發(fā)布和普及，這些效果很快就會成為用戶期望當中的一部分。 　　8.從零開始重新設(shè)計應(yīng)用 　　在iOS7設(shè)計規(guī)范當中，蘋果建議，在iOS7框架下重新設(shè)計應(yīng)用的最佳方式，就是剝離你已有的界面，將應(yīng)用的核心功能呈現(xiàn)出來，重新確認它們之間的相關(guān)性。 　　一旦你確認好功能方面的核心要素，就需要通過iOS7的設(shè)計主題將界面和交互模式重新構(gòu)建起來。舉個簡單的例子，蘋果的指南針應(yīng)用采用了最小化和功能優(yōu)先的設(shè)計方式，通過重新設(shè)計過的、更注重細節(jié)的形式來展示關(guān)鍵信息。 　　9.大量的留白 　　iOS7的應(yīng)用界面通過大量的呼吸空間來確?？勺x性和易用性。在官方的設(shè)計規(guī)范中，蘋果明確指出，他們希望設(shè)計師們通過留白傳達出平靜和穩(wěn)定的感覺，使應(yīng)用看上去更加專注和高效。 　　不要將所有東西都緊緊的塞到界面當中，通過留白讓你的內(nèi)容呼吸起來。你可以通過AppStore等界面來看看蘋果自己是怎樣做的。 　　10.啟動畫面out了 　　最后一點從技術(shù)角度上講不是新東西了，但在iOS7設(shè)計規(guī)范中，蘋果再次提醒設(shè)計師們，要避免使用那些無意義的、主要用來展示品牌信息的啟動畫面，或是任何妨礙用戶使用應(yīng)用完成任務(wù)的界面。我們的目的是要用戶盡可能快速的獲取內(nèi)容或使用功能，所以除非你有充分的理由，否則不要使用歡迎界面。為了強調(diào)這一點，蘋果專門拿計算器應(yīng)用做了一張演示圖片，來告訴我們不要這樣做。

關(guān)于iOS7的設(shè)計方面變化相關(guān)標簽：網(wǎng)絡(luò)公司，申請網(wǎng)站，網(wǎng)站搭建，網(wǎng)站開發(fā)

相關(guān)熱點推薦

搜索引擎蜘蛛理解相關(guān)性 網(wǎng)站的表單設(shè)計要點 外貿(mào)企業(yè)網(wǎng)站怎樣才能得 與用戶體驗的這兩年 運用什么技巧使用戶喜歡 網(wǎng)站設(shè)計中程序員和美工 Tab(選項卡)的產(chǎn)品 從精簡導(dǎo)航談小型網(wǎng)站的 如今虛擬外鏈對我們的作 網(wǎng)頁設(shè)計中的版式原理- 使用框架和滑動門技術(shù)進 清新的網(wǎng)站設(shè)計風(fēng)格 網(wǎng)頁設(shè)計之視覺信息傳達 用戶體驗與網(wǎng)頁界面設(shè)計 沒有交互意識的設(shè)計師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁設(shè)計 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機交互界面設(shè)計的三個 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗中溝通的技巧 迭代的設(shè)計 網(wǎng)站中視覺元素的設(shè)計 網(wǎng)站設(shè)計的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對 手機建站時容易進入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺識別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁不到首頁 青島網(wǎng)站設(shè)計中關(guān)于al 好設(shè)計應(yīng)該是平凡的設(shè)計 網(wǎng)站LOGO簡論 網(wǎng)頁布局設(shè)計基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點 新站快速推廣經(jīng)驗，百度 為中文而設(shè)計的文本框

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設(shè)價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶