當前位置:律師網大全 - 專利申請 - IOS11設計師人機交互規範。

IOS11設計師人機交互規範。

這篇文章大部分是讀書筆記,小部分是自己的思考。

自從iOS7發布以來,我們已經不自覺地適應了“扁平化的設計”,那些夢幻的光影、精美的材質、迷人的質感,似乎已經離開我們很久了(其實也就三四年)。這深刻地改變了整個移動設計——設計師可以專註於動態效果和內容,而不是錯綜復雜的視覺細節。如今,Skeuomorphic設計越來越不常見,取而代之的是迷人的漸變,精致的投影和無處不在的卡片。

當iOS在2007年首次發布時,人們對觸摸感應智能手機完全陌生。所以在那個時候,蘋果引入了壹個強大的隱喻——壹個模擬現實來教育用戶的直白的設計。比如系統內置的iBook程序。

但是當人們對智能手機越來越熟悉的時候,這種強大的比喻會讓人覺得過於直白和繁瑣。超寫實設計是壹種包容性不高的設計,其設計隱喻過於直白,越來越不適應內容大爆炸的移動互聯網時代。隨著移動終端承載的內容越來越多,所有的設計都要讓位於內容。

iOS的整個設計圍繞著三個核心概念:清晰、合規和深度。

為了使事情顯而易見,交互部分(比如按鈕和鏈接)應該是不言自明的。字體大小要合適,間距要合理,方便閱讀。妳的內容需要清楚地表明妳的軟件是什麽。妳能做什麽?

標題應該和內容有很好的對比。標題字號建議34pt以上,內容字號建議17-19pt。根據經驗,中文的字號可以比英文縮小1-2 pt。文本應該與其他元素對齊,以便流程的視覺流線準備就緒。IOS11多采用左對齊(接近安卓?)和中心對齊。

圖標不應該模棱兩可!而是讓用戶壹目了然。帶圖標的文字是最好的方式,因為即使是最明顯的圖標也不如文字準確。在壹個軟件中,同壹個圖標不應該代表兩種或兩種以上的意思,因為這樣會讓用戶混淆。

為了處理不同分辨率的屏幕,應該使用矢量化設計。

iOS11的壹些內置應用使用了區域填充圖標,而不是原來的線性圖標,圖標中的線條也由原來的1pt改為2pt。

每壹頁都應該清楚地表明它是什麽。品牌標識要最小化,妳要清楚的記住妳的APP是妳的產品,不是妳企業VI的壹部分。

如果頁面中有圖片,建議選擇高質量的素材和幹凈的背景,加上清晰的標題。

顏色是有意義的。在UI設計中,紅色代表破壞行為,綠色代表肯定行為,藍色代表鏈接,灰色代表非活動狀態。不要混淆顏色,比如綠色代表退出登錄按鈕(破壞性行為)。

按鈕應該易於點擊,它們的大小應該在30和30-60磅之間,最佳大小是44磅。如果妳的APP有點擊查看圖片的功能,請確保包含縮放功能,最好添加雙擊縮放功能。隨著iOS設備的屏幕越來越大,需要通過滑動手勢輕松導航到上壹個屏幕。如果妳的頁面內容很多,導致頁面很長,建議增加雙擊狀態欄返回頂部的功能。

橫屏模式在iPad等設備中很常見。蘋果建議在6P和iPhone X上使用橫向模式,可以嘗試在Sketch中使用自動布局設計,Xcode已經在故事板中加入了自動布局和大小類。技術改變世界,技術提高效率。

妳的內容應該是屏幕的主角,其他的都是次要的。妳應該使用界面設計元素來襯托妳的內容,而不是幹擾它。

妳的用戶界面應該直接面向美學核心。每增加壹個元素,就問自己“這有必要嗎?”如果妳的應用是壹個遊戲或者需要壹個特殊的主題,它傾向於使用厚重的紋理,3D效果和多重陰影。如果不是,妳應該關註功能性的顏色,和諧的漸變和漂亮的排版。

妳的內容要占據整個屏幕,最大化內部元素。避免在同壹個滑動區域使用不同形式的手勢,以留出更多的互動空間。

妳應該使用突出的顏色來顯示壹個元素是可點擊的或者需要突出顯示。如果不能選擇主題色,就選藍色,因為這是最保險的顏色。如果是初學者,建議用淺灰色背景/白底黑字開始設計。這個方案有很好的對比度和可讀性。

由於用戶界面的簡化和對內容的重視,文字內容會占據整個屏幕的50-90%。所以妳需要選擇壹個漂亮美觀的字體,並設置好字的粗細和顏色,才能有漂亮的視覺體驗和最好的閱讀體驗。為了使您的設計易於理解並適合iOS系統,建議使用默認的三藩市字體(方平字體)。因為蘋果在所有的內置程序中都使用它。

使用負空間使視覺焦點集中在內容上。妳看到的越少,妳就越能專註於某事。空白也給了整個頁面喘息的空間。不要用太多的結構層次,不要讓妳的視覺元素占據妳的屏幕。建議使用8pt網格圖案設計,這是移動終端的最佳網格設計圖案。

深度可能是最難理解的部分。這是壹個非常抽象的概念,但同時又非常強大和獨特。深度的靈感來源於壹切事物與過度場景的關系。在現實世界中,當妳從壹個房間走到另壹個房間時,妳會體驗到距離感和發展過程。這就是妳不會迷路的原因。

iOS最令人興奮和獨特的是動畫。每壹頁的過渡,從主頁面到文件夾頁面,再到App頁面,都充滿了深刻的隱喻。

為了防止背景幹擾妳的內容的清晰度,背景是模糊的。背景虛化不僅可以讓妳保持背景的原始顏色,還可以聚焦前景內容。當然,背景虛化並不是虛構的發明,它也來源於我們的現實世界。比如妳盯著壹個東西看,其他的東西就變模糊了。

動畫不僅可以從壹個畫面切換到另壹個畫面,還可以為妳的設計增添愉悅和樂趣。這是提高應用程序質量的壹個重要但經常被忽視的因素。通知顯而易見。背景有大雨的時候,天氣就比較好理解了。

雖然鼓勵使用動畫,但也不能過度。它們應該為妳的內容、功能目標和視覺導向服務。

隨著iOS設備的屏幕越來越大,後退鍵的位置太高,拇指夠不著。所以雖然沒有可視按鈕那麽明顯,但是手勢可以作為可視交互方式的補充。

3D Touch允許用戶快速訪問應用程序內外的選項。類似於妳Mac上的快捷鍵,其實是壹個高級功能,所以不應該是排他性的,也就是妳的用戶不用也可以完全使用妳的APP。

由於手機環境的復雜性和多樣性,在應用程序中應盡量少使用聲音。但是妳可以設置壹個特殊的通知聲音,讓它“先聽到它的聲音再聽到它的聲音”,為妳的APP形成壹個品牌/產品特色。

IOS 11使用大黑標題。因為隨著iPhone P和iPhone X的出現,屏幕越來越大,屏幕空間變得充裕。現在有了大標題才合理有意義。大字體的另壹個原因是可訪問性。隨著智能手機對整個社會的滲透,智能手機不再是年輕人的專利。蘋果需要讓iPhone照顧到各個年齡段。在輔助功能中,允許用戶設置字體大小。在iOS 11中,蘋果所有的內置程序都支持該功能。希望越來越多的第三方app支持這個功能。

更大的屏幕意味著更多的使用空間。對於狹小的屏幕空間來說,在小屏幕iPhone上嵌套容器(卡片)是奢侈和不合理的。但是當iPhone X和P系列出現的時候,情況就完全不同了。通知欄、標簽頁和導航以卡片的形式組織得更好,可以讓妳更方便地瀏覽。圓角的卡片讓內容看起來更有觸感,更滋潤。您可以使用模糊背景和陰影來增加設計的深度和背景。

是什麽導致了極客專用的又黑又酷的iPhone和iOS變成了今天的樣子?我個人對蘋果設計邏輯的理解如下。

設計背後的原因:移動信息的爆炸,用戶的膨脹,多樣化和大屏化,普通用戶成長為高級用戶,軟件功能越來越復雜。

怎麽做:包容性的設計模式,自動布局,優化的信息結構,可調的字體大小,防丟失的設計,易讀的文字。

最終的輸出設計:平面設計、特殊動畫、卡片設計、漂亮的版面、漂亮的字體和標題。

參考資料:

孟濤-《設計密碼2》

蘋果-《iOS人機界面指南》

  • 上一篇:想要保護自己的原創設計,除了商標、版權和專利之外的其他辦法是什麽?
  • 下一篇:信息市場
  • copyright 2024律師網大全