2019最新UI設計規(guī)范（Web/App/Watch/TV）

時間：2023-09-11 10:06:02 | 來源：網站運營

時間：2023-09-11 10:06:02 來源：網站運營

2019最新UI設計規(guī)范（Web/App/Watch/TV）：

Web UI設計規(guī)范

畫布建立尺寸寬度：1920px

分辨率：72像素/英寸

顏色：RGB

網頁內容安全寬度：≤1200px

首屏內容建議高度：800px

網頁柵格系統(tǒng)（Grid system）

App UI設計規(guī)范（iOS）

屏幕尺寸表：

iOS各設備尺寸

系統(tǒng)默認中文字體：蘋方

字體下載連接：

其他字體

APP ICON尺寸

UI官方組件

狀態(tài)欄 Status Bar

導航欄 Navigation Bar

搜索欄 Search Bar

標簽欄 Tab Bar

列表視圖 Table View

App UI設計規(guī)范（Android）

Android各設備尺寸：



系統(tǒng)默認中文字體：思源黑體
字體下載連接：

APP ICON尺寸

UI官方組件

Watch UI設計規(guī)范

各設備尺寸

智能電視UI設計規(guī)范

設計尺寸：

內容安全范圍

色彩
與電腦顯示器相比，電視屏幕有更高的對比度和飽和度?？紤]到這點，在使用純色的時候要考慮一下準則：
1、謹慎地使用純白色（#FFFFFF）。純白色在電視屏幕上會引起振動或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。
2、避免使用明亮的白色系，紅色系和橙色系，因為這些顏色在電視上顯示會特別嚴重的失真。
3、了解不同的電視顯示模式，包括標準、銳利、電影/劇場，游戲等等。確保你的應用能適應這些全部的電視模式。
4、避免使用大面積的色彩漸變，因為它們可能會導致色帶。
5、如果可能，在低質量的顯示器上測試你的應用程序。這些設備可能有較差的伽馬值和顏色設置。

文本
對電視來說，避免纖細字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體并選用抗鋸齒功能來增加易讀性。目前，Google TV只支持Droid Serif 字體族，但是你可以使用嵌入字體來創(chuàng)建一個更個性化的外觀。然而，牢記嵌入字體會拖慢系統(tǒng)運行。
1、以下是一些提高文本易讀性的方法：
2、每個段落限制90個單詞。
3、將長句改為幾個短句，讓用戶可以快速瀏覽。
4、在每行保持5-7個單詞，不要少于3個單詞，也不要多于12個單詞。
5、在電視上，在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。
6、使用Android的標準字體尺寸。例如，標準的小字體字號為14sp，在1080p的屏幕上，這相當于28點的字號。
7、為屏幕文本設置比印刷文本更大的行間距。

視覺焦點
應用程序的通行狀態(tài)包括上下文、選擇和焦點。上下文通常是一套分類，而選擇是用戶已經選中的分類。焦點是在光標下的控件或元素。這些控件或元素都應該有與眾不同的高亮狀態(tài)，而且高亮的機制在整個應用程序中應該保持一致。
舉個例子，如果是一個都是影片的屏幕上，應用程序提供一行顯示不同類別的上下文標簽。例如“全部電影”、“最新發(fā)行”、“流行”、“編輯推薦”等等。如果用戶選擇了其中的一個標簽，“選中”狀態(tài)應該在視覺上與正在變動的“聚焦”狀態(tài)不同，以此來指出當前屏幕導航所在的位置。


更多設計學習交流加微信：djnan9124