創(chuàng)新互聯(lián)為你，呈現(xiàn)app界面計(jì)劃之字體和圖畫計(jì)劃技術(shù)。字體作為界面設(shè)計(jì)的一個(gè)元素，在用戶的閱讀體驗(yàn)中起著重要的作用。這篇文章是 UI 計(jì)劃師 Viljami Salminen 同享的用戶界面字體計(jì)劃的底子規(guī)矩和訣竅。在現(xiàn)代的交互界面中，文本即界面，字體計(jì)劃則成為首要的計(jì)劃標(biāo)準(zhǔn)。appapp界面圖片設(shè)計(jì)也是很重要的，更多的是視覺嘛。

字體即界面計(jì)劃的基石

在用戶界面中,每個(gè)單詞和字母是非常重要的。好的字體是一項(xiàng)不錯(cuò)的計(jì)劃字體成了界面設(shè)計(jì)的基石，而我們計(jì)劃師，則是這些這類「信息基石」的修造者。作為設(shè)計(jì)師，我們的作業(yè)并不是在屏幕上隨機(jī)擺弄幾個(gè)元素，讓它們看起來漂亮，而應(yīng)從最首要的有些著手，即字體和內(nèi)容，以及由此發(fā)作的有關(guān)細(xì)節(jié)。這才是我們作為計(jì)劃師的基地技藝。字體的可辨識(shí)性也非常首要。在這一點(diǎn)上，一開始看起來似乎并不重要，特別當(dāng)辨認(rèn)單詞是如此簡(jiǎn)略的時(shí)分——人腦識(shí)別所需的時(shí)間小于一秒。然而,當(dāng)需要識(shí)別的單詞和字母組合的數(shù)量變得越來越多,字體的主要角色是明確的。盡管界面設(shè)計(jì)中,有許多微妙的細(xì)節(jié)需要考慮:如平衡、位置、水平和結(jié)構(gòu),但與一個(gè)好的文案字體在95%的成功。

一個(gè)優(yōu)秀的設(shè)計(jì)師理解:頁面上的文本不僅存在的內(nèi)容,它還可以用于與界面交互。Oliver Reichenstein我們?nèi)绾伍喿x?由于字體設(shè)計(jì)是如此重要,那么我們應(yīng)該花些時(shí)間學(xué)習(xí)閱讀“我們?nèi)祟愂侨绾伍喿x的”,和“字體設(shè)計(jì)是如何影響設(shè)計(jì)策略的”。

在閱讀Billy Whited 的文章「Setting Type for User Interfaces」時(shí)，我有一個(gè)重要的發(fā)現(xiàn)，即閱讀效率和文本的數(shù)量很有關(guān)系。這意味著，在閱讀不到20字的時(shí)候，單獨(dú)的閱讀比在長(zhǎng)句子的閱讀速度會(huì)慢一些。這是因?yàn)?，?dāng)我們讀到長(zhǎng)句時(shí)，眼睛是不是按照單詞在句子中一個(gè)一個(gè)地看，而是有選擇性的跳過，這個(gè)動(dòng)作被稱為“掃描”。

跳讀提高閱讀效率，并使一些功能詞可以省略。點(diǎn)記在心，對(duì)于用戶界面大多是個(gè)人的話，這意味著“掃描”不工作在用戶界面設(shè)計(jì)。因此，當(dāng)我們了解到每一個(gè)字母的細(xì)微差別將是一個(gè)重要的閱讀體驗(yàn)的影響時(shí)，我們會(huì)明白為什么選擇字體這么重要。

在過去，我們相信，我們的政策是識(shí)別字的輪廓，該理論被稱為“Bouma shape 伯馬形”，然后研究發(fā)現(xiàn)這種觀點(diǎn)并非完全正確，字體的可讀性和識(shí)別不僅是整體的字體輪廓的確定。我們應(yīng)該重視字體本身。
可讀性決定字母的原因是什么？
首先，這個(gè)問題的答案似乎有點(diǎn)難。閱讀是一種習(xí)慣，良好的閱讀習(xí)慣的人一定閱讀更流暢。我們?nèi)绾尾拍苤烙绊懣勺x性字母的因素？為了便于理解，我們首先需要把句子變成單詞，把單詞變成字母，把字母分成更小的元素，然后再仔細(xì)分析比較細(xì)微的細(xì)節(jié)。
2008，對(duì)瑞士維多利亞大學(xué)心理學(xué)學(xué)院進(jìn)行了實(shí)證研究，說明拉丁字母的情況范圍是適合閱讀最好的。在這項(xiàng)研究中，一些有趣的結(jié)論。首先，線是終止字母識(shí)別的方式起著至關(guān)重要的作用

上圖顯示了辨識(shí)單詞時(shí)最受人眼關(guān)注的區(qū)域范圍。在設(shè)計(jì)這一領(lǐng)域的字體時(shí)，不僅要考慮閱讀的一般性和習(xí)慣性，而且考慮到每一個(gè)字母的差異性也要考慮。
最近我的一個(gè)項(xiàng)目命名為L(zhǎng)egibility App開發(fā)，這個(gè)工具可以為字體識(shí)別的仿真試驗(yàn)計(jì)劃。通過對(duì)文本具有不同的濾波效果（如模糊、朦朧和像素效應(yīng)），仿照不同的閱讀環(huán)境?，F(xiàn)在仍然是一個(gè)測(cè)試版，支持Chrome，Opera和Safari。
用戶界面類型設(shè)計(jì)應(yīng)注意哪些方面？
在理解人的原則和信件的閱讀，在未來的分辨度的概念，關(guān)于用戶界面的項(xiàng)目，我們有一個(gè)很好的視角。以下是我的總結(jié)：
1.辨 識(shí) 度
身份識(shí)別是需要考慮的第一要素。信函的格式理解，可識(shí)別。在用戶界面項(xiàng)目中，理解字母可見更容易辨認(rèn)。許多無襯線字體（sans serif），包括黑體、大寫字母和小寫字母l我難以區(qū)別，是一個(gè)非常壞的理解關(guān)于UI的計(jì)劃。

比較左邊的 Source Sans Pro 字體和右邊的 Helvetica 字體。右邊的 Helvetica 字體中，在前三個(gè)字母幾乎是相同的。而左邊的 Source Sans Pro 字體表現(xiàn)更好的。甚至有人認(rèn)為，Helvetica 不適用于任何 UI 設(shè)計(jì)，不過它本來就不是為屏幕顯示而生的。Helvetica實(shí)在太弱。它不是為小屏幕設(shè)計(jì)的。像“毫升”表明效果很差。
2.低調(diào)
一個(gè)好的界面字體讓人們意識(shí)到它的存在，而不是喧賓奪主。字體應(yīng)該方便用戶完成任務(wù)，而不應(yīng)該是用戶添加認(rèn)知的負(fù)擔(dān)。

3.靈 活 度

用戶界面字體應(yīng)該有一定的靈活性。記住，我們是在為各種媒體設(shè)計(jì)的用戶體驗(yàn)，我們不能控制的是使用，對(duì)用戶的能力，應(yīng)用場(chǎng)景，瀏覽器，屏幕大小，連接速度，甚至使用輸入模式。我們選擇使用字體的設(shè)計(jì)應(yīng)該支持使用盡可能多的場(chǎng)景，可以在不同的大小，不同的設(shè)備，以及某些小屏幕設(shè)備以及。如無襯線字體可以運(yùn)行在低分辨率的小屏幕。

4.高 的 x-height

X 字高是指小寫字母「x」的高度。x-height 越高，小屏閱讀領(lǐng)會(huì)就越好。但字高也不能過大，要不然 n 和 h 難以差異。

5.寬 比 例

份額是指一個(gè)字符的高和寬的比值。寬度的比值越大，字體辨識(shí)度越好，小屏閱讀領(lǐng)會(huì)也越好。

6.微 調(diào)

微調(diào)是一個(gè)過程，是指對(duì)字體的調(diào)整，以獲得好的閱讀體驗(yàn)。微調(diào)，以更好地適應(yīng)像素網(wǎng)格顯示的字體矢量線。微調(diào)字體在低分辨率屏幕上，以獲得清晰和清晰的文本是很重要的。微調(diào)的最早是蘋果發(fā)明的，但由于TrueType字體格式的推出，微調(diào)將逐漸消失。現(xiàn)在，只有在需要支持IE8瀏覽器或基于vera.ttf或EOT格式將考慮使用微調(diào)。

在未來，我認(rèn)為，我們將能夠看到不斷添加“逐步增加技術(shù)”的把握，文本內(nèi)容比字體排版更優(yōu)先。雖然一直是頁面字體的計(jì)劃是首要的，但直到現(xiàn)在我們開始關(guān)注這個(gè)問題。為了計(jì)劃字體的愿望，我們需要做的是學(xué)習(xí)很多用戶的閱讀環(huán)境。雖然這明白清楚，但實(shí)際情況并非如此。但在未來，我認(rèn)為，字體將在閃光的環(huán)境變得更加“敏感”，并在一系列元素（角度、分辨率、字體、箔引擎、屏幕亮度、環(huán)境光和閱讀距離）進(jìn)行調(diào)整。一起，我想，蘋果的操作系統(tǒng)將與字體調(diào)整功能兼容，字體將能夠根據(jù)用戶的不同要求自動(dòng)調(diào)整。

有了文字，圖畫則是必不可少的，圖文并茂總是令人喜愛的。介紹一下app界面圖畫計(jì)劃辦法。

怎樣做出這種有厚度的 APP 界面圖畫

簡(jiǎn)略粗暴的便是PowerPoint：首要到網(wǎng)站上找?guī)讖埥缑鎴D：App/頁面-UI圖標(biāo)庫，翻開PowerPoint2013，將圖畫拖入PowerPoint中，選中圖畫，右鍵選擇【設(shè)置圖畫格式】

詳細(xì)數(shù)值的設(shè)置可以參看(留心透視不要太強(qiáng)烈)：

忘掉說了，將陰影透明度調(diào)至10支配，因?yàn)橄旅孢€有兩張圖畫#_#!

陰影設(shè)置參看：

現(xiàn)在照葫蘆畫瓢：

假如你要應(yīng)用到PhotoShop，那么將對(duì)剛剛制造的六個(gè)圖層進(jìn)行組合，先Ctrl+A，選中全部元素，然后Ctrl+G，進(jìn)行組合。

選中組合好的圖層，然后右鍵，【另存為圖畫】，然后把圖畫拽入PS中即可!

不要急，還有作業(yè)，我們?cè)囋嚠媯€(gè)正方體，然后，三維格式能更皎白了，文字也是可以有這種效果的，感興趣可以倒騰一下：

網(wǎng)頁名稱：app界面設(shè)計(jì)之字體和圖片設(shè)計(jì)技術(shù)
標(biāo)題URL：http://www.rwnh.cn/news13/173163.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站改版、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)、微信小程序、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)