1. 程式人生 > >App介面設計規範-字型規範

App介面設計規範-字型規範

通過對不同型別的app進行總結,總結出app的字型規範。

一、字型選擇

1.IOS:蘋果ios 9系統開始,系統最新的預設中文字型是:蘋方。英文字型是: San Francisco

Image title

2.Android:英文字型:Roboto,中文字型:Noto

Image title

二、案例分析

1.以今日頭條介面為例,導航主標題字號為40px,正文標題為36px,輔助性說明文字為24px,小字(視訊長短,標題欄按鈕名)為20px,頭像名為28px。字型大小代表的層級關係一目瞭然。

2.正文部分,導航欄標題文字為36px,內容標題為48px,正文為36px,小字為22-20px。

Image title

(因app性質不同,今日頭條作為閱讀型別的app,會更注重文字的閱讀便捷性。所以字號選擇上會偏大一些。)

3.再以微信為例,導航欄標題文字為36px,內容標題文字為34px,內容為28px,輔助性說明文字為24px。

Image title

4.最後以豆果美食為例,豆果美食是我認為介面閱讀很漂亮的一個app。文字閱讀給人一種很精緻舒服的感覺。同閱讀型別的新聞app和工具型別的app在字號選擇上相比,它的文字選擇的要稍小一些。如導航欄的字號為30px,頁面最大字號為34px(分類標題),其次是32px,28px,24px,20px

Image title

這是豆果美食的內容詳情頁,在正文標題用到了36px,正文內容為32px,次要文字為28px,其次是24px,22px,20px。

Image title

三、總結

Image title

總結如圖,選擇字型大小時應根據app的性質,風格,定位來進行選擇,應通過文字大小表現出內容的輕重,層級劃分,做到層級關係明顯。除了對字型進行字號大小的區別,還可對文字進行樣式(加重字型)和顏色的區分。

(原創分享,喜歡的小夥伴兒給我點個贊吧~O(∩_∩)O謝謝)

相關推薦

Android/IOS APP介面設計之尺寸規範

1.尺寸以及解析度   iPhone的介面尺寸不用多說,640*960是基本OK的,也可以是適應5S的640*1136,馬上iPhone 6也快來了(隨便吐槽一下網上曝的真機諜照,真是醜到離譜...),只要寬度不變都好說。至於畫素問題,網頁和移動的UI用72px就可以了

最新移動App介面設計尺寸視覺規範

如今移動介面的尺寸的快速更迭讓使用者有了更多的選擇,但同時也給我們的設計帶來越來越大的挑戰。一些剛開始接觸介面設計新手們,碰到最多的就是有關尺寸的問題,介面多大,文字怎麼樣才合適,是不是要做幾套不同大小的才能適應?面對這樣的挑戰,怎樣才能設計出使用者喜歡的App?首先你要了解移動App介面設計尺寸視覺規範,

App介面設計規範-字型規範

通過對不同型別的app進行總結,總結出app的字型規範。 一、字型選擇 1.IOS:蘋果ios 9系統開始,系統最新的預設中文字型是:蘋方。英文字型是: San Francisco 2.Android:英文字型:Roboto,中文字型:Noto 二、案例分析 1.以今日頭條介面為例,

iOS和Android的app介面設計規範

最近從一個程式猿變成產品汪了!人生職場的一次轉變吧!從開發人員轉產品,也需要很多基本工具和規範需要學習; 以下是自己對APP設計過程中一些自己寫學習和總結,難免有錯,歡迎指正; 在產品道路成長中,記錄一下iOS和Andoird的介面設計規範,方便進行標準的產

XX公司APP介面設計規範v1

APP介面設計規範v1 張遂程 2018年02月06日16:15:03 前言 沒有最優的方案,只有最適合的方案,本文指出對APP介面設計的一些規範與大家分享和共勉,涉及到APP介面設計規範v1.0,設計案例的分享,和一些PHP編碼的要求,目的在於

APP介面設計規範:如何定義視覺規範

Sketch:常用來製作線框、介面,偶爾繪製圖形。MAC電腦專用移動APP設計軟體。也是一款快速設計APP介面的軟體。 Adobe lllustrator & Photoshop:用作圖示設計、圖形繪製、照片編輯等。 墨刀、axure &

RESTful API介面設計標準及規範

RESTful發展背景及簡介 網路應用程式,分為前端和後端兩個部分。當前的發展趨勢,就是前端裝置層出不窮(手機、平板、桌面電腦、其他專用裝置…)。因此,必須有一種統一的機制,方便不同的前端裝置與後端進行通訊。這導致API構架的流行,甚至出現"APIFirst"的設計思想。RESTful

最新最全移動端介面設計UI尺寸規範-2018年初版

一、UI尺寸基礎知識 1、畫素密度-PPI 畫素密度是指顯示螢幕每英寸的長度上排列的畫素點數量,PPI(Pixels per inch)越高代表螢幕顯示效果越精細,Retina屏比普通屏清晰很多,就是因為它的畫素密度翻了一倍。 2、計量單位 iOS和Android

手機APP介面:設計一個獲取手機驗證碼的功能

現在的專案中,都會涉及到一個手機驗證碼獲取功能 我們今天就來探討下如何更好的設計好這個看似小的功能 給APP設計一個獲取手機驗證碼的介面 根據業務邏輯,初步總結了可能會有以下業務場景 需要用到手機驗證碼的驗證功能 大家來看下圖片吧 login:登入 reg

APP介面設計安全問題

分享一下我老師大神的人工智慧教程吧。零基礎,通俗易懂!風趣幽默!http://www.captainbed.net/ 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

APP介面設計流程和APP產品設計流程知識彙總

  本文轉載自網際網路,如有侵權,請聯絡我及時刪除。謝謝。 第一部分:APP介面設計流程概要分享,總共11個步驟。   1. 確定你的創意方向或者圍繞主題展開 您的創意是否有人做過,如果有類似的app,那就要多多考慮,爭取超越並且有一些獨特的優化設計在其中

App介面設計之token的php實現

  App介面設計之token的php實現 為了保證移動端和服務端資料傳輸相對安全,需要對介面進行加密傳輸。 一、token的設計目的:  因為APP端沒有和PC端一樣的session機制,所以無法判斷使用者是否登陸,以及無法保持使用者狀態,所以就需要一種機制

關於APP介面設計

最近一段時間一直在做APP介面,總結一下APP介面開發過程中的注意事項: 1、效率:介面訪問速度 APP有別於WEB服務,對伺服器端要求是比較嚴格的,在移動端有限的頻寬條件下,要求介面響應速度要快,所有在開發過程中儘量選擇效率高的框架,PHP建議使用YAF框架。 2

ThinkPhp3.2.3 多專案 後臺 APP介面設計 框架設計

↓↓↓專案檔案組成部分↓↓↓ APP檔案是後臺,index.php是入口檔案 Interface檔案是介面,注意這裡不要用api命名!可能會有問題!interface.php是入口檔案 注:兩個入口檔案唯一的區別就是interface比app入口檔案多

手機APP介面設計尺寸筆記

如今市場上的手機型別繁多,同種品牌的手機下面也有很多種機型。比如蘋果手機,不斷的研發和創新,保持著一年一款新機型的更新速度,在越來越多的國產機的夾擊下,衝擊著手機市場。(果粉們表要激動。)與此同時,螢幕的尺寸也越來越大,網友不禁調侃道:手機越來越像平板,平板越來越像手機。

app界面設計字體規範

最大 pla 大小 按鈕 20px 2-0 關系 tao ron 通過對不同類型的app進行總結,總結出app的字體規範。 一、字體選擇 1.IOS:蘋果ios 9系統開始,系統最新的默認中文字體是:蘋方。英文字體是: San Francisco 2.Android:英文

介面設計規範

文章目錄 介面設計規範 1 介面示例 2 基本規範 2.1 公共引數 2.2 響應資料 2.3 欄位型別規範 2.4 上傳/下載 2.5 避免精度丟失 3 瘦客戶端

從 Feign 使用注意點到 RESTFUL 介面設計規範

最近專案中大量使用了Spring Cloud Feign來對接http介面,踩了不少坑,也產生了一些對RESTFUL介面設計的想法,特此一篇記錄下。 SpringMVC的請求引數繫結機制 瞭解Feign歷史的朋友會知道,Feign本身是Netflix的產品,Spring C

Web應用介面設計規範

目錄: 一、軟體介面規範的重要性及其目的 二、使用者體驗為何如此重要 三、Web規範體系介紹 四、介面設計開發流程 五、應該遵循的基本原則 六、介面設計規範 一、軟體介面規範的重要性及其目的     ①使最終設計出來的介面風格一致化,開發編碼人員相互之間開發更輕鬆,

【RESTful】RESTful API 介面設計規範 | 示例

概念 本質:一種軟體架構風格 核心:面向資源設計的API 解決問題: 降低開發的複雜性 提高系統的可伸縮性 例如:設計一套API,為多個終端服務。 設計概念和準則 網路上的所有事物都可以被抽象為資源 每一個資源都有唯一的資源標識,