APP界面設計:如何選符合產品氣質的字體

0 評論 13665 瀏覽 48 收藏 8 分鐘

不管是中文還是英文,文字不僅是傳達信息的載體,也是設計中的重要元素,設計過程中盡量保證文字的閱讀性,在嚴謹中尋求突破。經過藝術設計的字體,可以使信息更形象、更美感的銘記于你心中。

隨著移動端扁平化設計推進,越來越多的設計師不滿足于僅僅是色塊、圖標和系統字體的枯燥組合,而把更多的心思投入到精益求精的視覺設計中。

iOS 系統當中的APP設計字體:

常選擇華文黑體或者冬青黑體,尤其是冬青黑體效果最好。

iOS7字體設計規范以及APP設計中英文字體下載

Android系統當中的APP界面設計字體:

英文字體:Roboto

中文字體:Noto ? (Android 5.0 Lollipop 思源黑體字體)也是目前安卓系統當中使用的最新字體,之前的字體還有如下Droid字體。字體設計也比較優雅。

APP界面設計 APP設計 UI設計 APP字體設計

Android移動APP設計字體規范詳解

下面我們就來看看一些比較好的符合產品氣質的字體和app。

優雅的APP案例欣賞:Yahoo 天氣 – 最優雅的天氣APP

APP界面設計 APP設計 UI設計 APP字體設計

Yahoo Weather! 不論是在布局、字體和色彩的運用上都顯得精致細膩,滑動時高斯模糊的處理更是流暢平滑。值得去下載學習。

好的字體在文本的易讀性上起了決定作用,卻不止于此,它也傳遞出設計師分享的意圖。它是整個用戶體驗的重要部分。

從另一方面講,缺乏好的字體,是整個產品不專業的表現。文字是主要界面的基礎元素。

第一部分:如何來選擇更符合產品主題氣氛的字體與字形:

案例1 ?戰爭氣質

APP界面設計 APP設計 UI設計 APP字體設計

原型/圓體、哥特體

左圖字體所傳達的氣質:趣味、活潑;

顯得對這部戰爭類型的電影所表現的氣質格格不入。

右圖字體所傳達的氣質:哥特、凌厲;

采用了具有裝飾性的襯線字體,襯線字體的特點在于線條交接處和末端具有明顯的粗細變化和裝飾,使字體氣氛感覺犀利,加上紋理質感處理,便有了神話意境和哥特式驚悚的味道,很好的襯托出電影本身的氣質。

案例2 ?文藝氣質

APP界面設計 APP設計 UI設計 APP字體設計

原型/宋體

上面兩張電影海報應用的字體都是宋體,宋體的衍生有很多,又長有扁,有胖有瘦。一般用于書籍印刷。而在電影界上這類型字體多用于文藝片,正如案例中,兩部都是文藝溫馨的愛情片,運用宋體進行排版處理,既顯得清新又文藝。

案例3 ?女性氣質

APP界面設計 APP設計 UI設計 APP字體設計

原型/細線體、襯線體

字如其人,女性的特點是細致優雅、苗條細長;常被用作化妝品、女性雜志、藝術等女性主題領域。

案例4 ?男性氣質

APP界面設計 APP設計 UI設計 APP字體設計

原型/黑體

作為強現代感的無襯線字體—黑體,給人感覺粗壯緊湊,頗有力量感,可塑性很強,對比案例3的細線體,即可表現為陽剛有力的男性氣質,也可以變成纖細優雅的女性氣質。

案例5 ?歷史文化氣質

APP界面設計 APP設計 UI設計 APP字體設計

原型/書法字體

書法字體具有很強的設計感與藝術表現力,運用好的話往往是點睛之筆。各式各樣的書法字體有著自己獨特的細膩的特點,把握好這一點,既能給電影增加文化內涵,也能襯托出電影的氣質。

從以上5個方面,算是給大家點睛了一下。希望大家可以自己多去觀察和了解這些字體的氣質。才能很好的用在我們的移動app界面上。

如今,字體是移動設計師的重要武器之一,恰當的字體運用,可以使產品的定位和內容的情感有加倍的表達。因為系統默認的字體太少或者太丑了??梢怨┰O計師發揮的就是內嵌字體。

內嵌字體就是 設計師設計在圖片上 或者是把字體當中圖形化的一種使用。

所以,內嵌字體,成為了一些追求完美的App設計師的一個解決方案。

當然,有些時間設計師也要學會根據產品的氣質去改變字體。重新設計下字體。

第二部分、APP案例詳解:簡書APP

APP界面設計 APP設計 UI設計 APP字體設計

作為一個「交流故事,溝通想法」的的寫作平臺App,簡書為了優化閱讀體驗,選擇了思源黑體作為內嵌字體,使用戶發布的不管是簡體中文、繁體中文、還是日文韓文,都能有比較理想的表現。食色的產品概念是和「生活家」們一起,發現與分享城市中的美食,所以選擇了細膩精致的方正蘭亭纖黑作為主要的界面字體。

用戶第一次使用,就能感受它與其他產品在氣質上的不同。

除了內嵌簡潔親和的非襯線體之外,諸如像Lohas樂活這樣小清新和強調自然生活感的產品,則會選用了田氏宋體舊字形或者方正蘭亭刊宋之類的,既能體現古韻,又相當簡練質感的襯線字體來表達產品定位和氣質。

以上這些關于移動app字體設計知識,希望對各位有所幫助。

 

作者:25學堂

來源:http://www.chinaz.com/design/2015/1027/462541.shtml

本文來源于人人都是產品經理合作媒體@站長之家,作者@25學堂

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!