最新UI設計規範(Web/App/Watch/TV)
Web UI設計規範
畫布建立尺寸寬度:1920px
分辨率:72像素/英寸
顏色:RGB
網頁內容安全寬度:≤1200px
首屏內容建議高度:800px
網頁柵格系統(Grid system)
App UI設計規範(iOS)
屏幕尺寸表:iOS各設備尺寸
字體:系統默認中文字體:蘋方
APP ICON尺寸
UI官方組件
狀態欄 Status Bar
導航欄 Navigation Bar
搜索欄 Search Bar
標籤欄 Tab Bar
列表視圖 Table Vie
App UI設計規範(Android)
Android各設備尺寸:
系統默認中文字體:思源黑體
APP ICON尺寸
UI官方組件
Watch UI設計規範
各設備尺寸
智能電視UI設計規範
設計尺寸:
安全範圍
色彩
與電腦顯示器相比,電視屏幕有更高的對比度和飽和度。考慮到這點,在使用純色的時候要考慮一下準則:
1、謹慎地使用純白色(#FFFFFF)。純白色在電視屏幕上會引起振動或圖像重影。用#F1F1F1(hex)或者240/240/240(RGB)來代替使用純白色。
2、避免使用明亮的白色系,紅色系和橙色系,因爲這些顏色在電視上顯示會特別嚴重的失真。
3、瞭解不同的電視顯示模式,包括標準、銳利、電影/劇場,遊戲等等。確保你的應用能適應這些全部的電視模式。
4、避免使用大面積的色彩漸變,因爲它們可能會導致色帶。
5、如果可能,在低質量的顯示器上測試你的應用程序。這些設備可能有較差的伽馬值和顏色設置。
文本
對電視來說,避免纖細字體或者有過寬、過窄筆畫的字體。使用簡單無襯線字體並選用抗鋸齒功能來增加易讀性。目前,Google TV只支持Droid Serif 字體族,但是你可以使用嵌入字體來創建一個更個性化的外觀。然而,牢記嵌入字體會拖慢系統運行。
1、以下是一些提高文本易讀性的方法:
2、每個段落限制90個單詞。
3、將長句改爲幾個短句,讓用戶可以快速瀏覽。
4、在每行保持5-7個單詞,不要少於3個單詞,也不要多於12個單詞。
5、在電視上,在深色背景上的淺色文字比在淺色背景上的深色文字更容易閱讀。
6、使用Android的標準字體尺寸。例如,標準的小字體字號爲14sp,在1080p的屏幕上,這相當於28點的字號。
7、爲屏幕文本設置比印刷文本更大的行間距。
視覺焦點
應用程序的通行狀態包括上下文、選擇和焦點。上下文通常是一套分類,而選擇是用戶已經選中的分類。焦點是在光標下的控件或元素。這些控件或元素都應該有與衆不同的高亮狀態,而且高亮的機制在整個應用程序中應該保持一致。
舉個例子,如果是一個都是影片的屏幕上,應用程序提供一行顯示不同類別的上下文標籤。例如“全部電影”、“最新發行”、“流行”、“編輯推薦”等等。如果用戶選擇了其中的一個標籤,“選中”狀態應該在視覺上與正在變動的“聚焦”狀態不同,以此來指出當前屏幕導航所在的位置。
Powered by Froala Editor