設計中文 UI 有什麼技巧？

01-05

注意字號大小。一個固定的字號看英文可能更舒服、但是看中文可能需要更大的字號。

注意字體大小！太大、太小都不合適

font family、font size、font weight、Line-height、align

中文比西文更需要講究以上幾點

無論做任何設計需要用到中文的時候，那麼就讓文字盡量的變少一些吧。

正好寫了一片關於文字的設計技巧。

原文鏈接：http://mp.weixin.qq.com/s?__biz=MzA3MDgyMjMwMA==mid=2649932406idx=1sn=811fa18c014e99ef175501b13eca738cscene=0#wechat_redirect

人類獲取信息的方式從最早的象形文字到現代富媒體的形式，富媒體讓信息的表達不再僅限於文字，它可以包括文字、圖案、表情、色彩、語音、音樂、視頻等。文字作為最直接，最有效的方式仍然是信息表達的首選。

那麼，文字在信息傳播中有何種特點呢？

首先，文字是敘述性的。因為它直接而具體地告訴受眾所指的內容。其次，文字也是一種符號圖形，代表了某種需要理解的含義。

設計時，如何拿捏文字的敘述性與符號圖形這2個特性？

一、關於敘述性，可以通過歸納一些同語境的關鍵詞，來進行設計。

按照app的功能屬性進行大致分類，敘述性對應各功能屬性的關鍵詞有以下幾種：

a、閱讀屬性

b、電商屬性

c、旅遊/活動屬性

d、工具屬性

e、分類排行屬性

1.1閱讀屬性

所調查的app中，除了單讀、閱界這2款app基本不用文字來表達，其餘app用的比較多的關鍵詞，比如頭條、推薦、精選、熱門、今日、收藏、熱點、發現、關注等。

研究的一些app：

網易：頭條、科技、汽車、時尚、圖片、24、測試閱讀口味，獲得更優質的推薦、置頂、跟貼、新聞、閱讀、視聽、話題、我。
站酷：推薦
反正：精選、更多、熱門
神補刀：高分榜、看看、玩玩
日課：我的、日課、設置、收藏、原文、今日、分享

墨客詩：收藏、設置、春節、作者、目錄、分享
視頻頭條：推薦、社會、娛樂、搞笑、頭條、爆料圈、歷史、我
今日頭條：推薦、熱點、上海、視頻、社會、訂閱、首頁、視頻、話題、我的
fork：貼紙、分享、轉發、關注、發現、通知、我
未來研究所：篩選、推薦、關注、娛樂、體育、財經、預測、專題、發現、福利、個人

1.2電商屬性

電商類的用得比較多的關鍵詞為：商品、店鋪、超市、優惠券、購、搶、領、降價、秒殺、好貨、逛街、清單、購物車、超值、買單、立減、省。

研究的app清單：

京東：掃啊掃、消息、搜索京東商品/店鋪、京東超市、全球購、服裝城、白拿白賺、京東到家、搶2元話費、領京豆、優惠券、降價排行、全部、京東快報、秒殺、京選尖貨輪番秒、手機專享、限時滿減、閃購
網易考拉：在千萬海外商品中搜索、推薦、新發現、母嬰、美妝、箱包配飾、每日簽到、限時購、每日上新、立省5元、首頁、活動、分類、購物車、我的考拉
淘寶：掃一掃、流量任性花、消息、天貓、聚划算、天貓國際、口碑外賣、天貓超市、充值中心、阿里旅行、領金幣、淘生活、分類、淘寶頭條、淘搶購、有好貨、愛逛街、必買清單、首頁、微淘、社區、購物車、我的淘寶
1號店：上海、搜索你想找的商品、1號團、充值中心、小區雷購、活色生鮮、1號閃購、1號商城、新品試用、訂單查詢、低價真相、手機會場、電腦會場、精選會場、首頁、分類、1品堂、購物車、我的1號店
汽車超人：上海市、優惠洗車、超值精洗、折扣車險、查違章、換輪胎、去保養、換機油、折扣加油、車品特賣、特惠保養、幸運大轉盤、快搶車、首頁、周邊門店、我的
萌販：這裡！搜索你想要的宅品、搜索、COS用品、周邊食玩、手辦模型、衣服家裝、同人創作、ACG原作、每日一買、買買買、宅品、晒圖、我的

1.3旅遊/活動屬性

旅遊類的用得比較多的關鍵詞為:目的地、景點、主題、交通、車程、排序、附近、發現、訂單、門票、攻略、簽證、酒店。

研究的app清單：

攜程周末游：目的地、主題、默認排序、車程、
活動樹：活動分類、活動日曆、附近、今日推薦、首頁、發現、我的
去哪兒：搜索旅行地/酒店/景點、酒店住宿、300元紅包未激活、酒店團購、今日特惠、公寓、鐘點房、國際酒店、會場、客棧民宿、交通出行、機票、火車票、特價機票、汽車票、車車、旅遊攻略、門票、攻略、旅遊團購、簽證、首頁、服務、訂單、發現、我的

1.4工具屬性

應用的範圍不一樣，關鍵詞差異較大，這個得具體問題具體研究了。

研究的app清單：

印象筆記：設置、文字、照片、提醒、清單、群聊、工作群聊、查看、筆記、全部、筆記本、標籤、
高鐵管家：火車票、飛機票、專車、踏青、出發地、目的地、出發日期、搜索、常用搜索、車票預定、我的行程、旅行服務、個人中心

1.5分類排行屬性

關鍵詞：類別、精品、推薦、排行、更新、精選、新、優秀

研究的app清單：

Applestore：類別、精品推薦、優秀新App、顯示全部、升級好幫手、精品推薦、排行榜、我的附近、搜索、更新
pp助手：大家都在搜、必備、榜單、分類、活動、插件、優秀新軟體、顯示全部、優秀新遊戲、精選、軟體、遊戲、個性、管理

以上是一些歸納總結的關鍵詞，供參考。

二、符號圖形，我們可以從可識別性和可閱讀性兩方面探討。

這裡總結了8種關於文字圖形符號化的設計技巧：

2.1運用色彩、大小對比、深淺對比

給文字加點顏色，變換下大小，立馬不一樣哦～

2.2正反圖底關係

想更凸顯文字，可以試試加個底色～

2.3轉成繁體字

直接換成繁體字，簡單又好用～

2.4品牌居中置頂

這已經成默認設置了，都是這樣布置的

2.5個性化的搜索框提示

這裡可以開腦洞啊，給產品一個符合特性的搜索提示語吧！～

2.6標籤化

打標籤，裝飾味很足，容易吸引眼球

2.7圖形+文字

直接把文字圖形化，但仍然保留文字信息，比純粹圖標表達的意思更準確

2.8文字圖形化

文字圖形化，要設計得好需要花點時間呢。具體應用的時候，根據需求，拿捏好2者的關係即可。
本文未經許可，請勿轉載
也可關注本人個人公眾號 Free_Garden

只要夠突出，能抓住你想表達的重點，即使不尊重邏輯規律，也會是一個亮點，畢竟設計師沒有絕對的

中文確實是字體變化少，而且都是塊狀的，所以容易缺乏層次感。

但其實頁面只要層級關係很明確，顏色和間距同樣可以劃分層次，中文也可以做的還不錯！

如果你覺得中文實在不好用，可以多用圖形和圖標。

把字體的選擇把握好，這一點其實比較難，是否可以把一些中文直接做成圖片，免得嵌入字體。還要考慮中英文同時出現時的相互協調問題。中文不是拉丁文字，所以同樣的信息，中文佔用的面積比較小，這一點要考慮。如果太多中文方塊字顯得凌亂，考慮一下是否可以用表意的圖片icon來代替。其他的就和西文ui設計沒太多區別。此外，你可以參考一下主流國內app的做法。