您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> 設計理論 >> 瀏覽設計教程

內(nèi)部教程!超細致的付出寶設計規(guī)范之線下字體篇

在線了局景中的物料、機具尺寸是依據(jù)人體工程學為參考,不同位置、不同距離、不同角度下,物料類型 、版面結(jié)構(gòu)、筆墨層級、字號、字間距等,都影響著對使用者的信息傳遞。

一、原則

1. 動態(tài)與靜態(tài)

人在線下環(huán)境對信息內(nèi)容閱讀分為靜態(tài)與動態(tài)。當處于不同的閱讀距離時,觀看物料的角度也會有所不同。

根據(jù)「人體工程學」及「福格舉動模型」的數(shù)據(jù):當人從動態(tài)視距進入到靜態(tài)視距的紅點位置,即人眼看清一個目標并獲得視覺印象,平均時間是170毫秒,單個字是250毫秒。

行進速度增長,視角會隨增長幅度減小。因此,運動狀況下的快速閱讀要避免讓用戶產(chǎn)生「回視」或「眼跳」。

回視:人們在閱讀過程中,當遇到不理解的內(nèi)容時,敏捷且偶然識地回顧前面的內(nèi)容。

眼跳:在閱讀過程中,眼睛的黃斑中間凹在從一個字移到另一個字時,其眼簾發(fā)生的0.1秒忽然震顫。

在「動態(tài)與靜態(tài)」原則下,我們必要區(qū)分物料與人接收信息的狀況和時間,如「遠距離+高視角+且多在運動狀況下觀看的」 大型橫幅豎幅就禁止呈現(xiàn)多信息。

2. 視角與視距

靜止狀況下,人的水平視覺焦點約介于 3°-10°之間。眼睛最佳轉(zhuǎn)動在水平線以上25°,以下35°左右位置。

在此視圓錐之外的影像(灰色部分)是由周邊視覺搜尋,靠余光感受到的區(qū)域,其范圍介于水平視角以上 60°、以下 70°。

以平均身高1米6的女性用戶為例,在其最佳視角下不同視距的三種物料(臺卡、海報、易拉寶)傳遞的信息范圍是不一樣。當視距為0.5米的情況下,結(jié)合前面的「視野分布圖」,我們大約可得出其視覺盲區(qū):地平線以上0.35米。

這三種「代表物料」是依據(jù)目前付出寶線下各行業(yè)線物料分類篩選得出,總體兩大類:固定類與移動類,其中固定類中又可細分為5類:地面類、桌面類、墻面類、落地類、懸掛類。


把所有這些物料放入十字象限中,從 「地面」往上到 「桌面 墻面 頂面 」,再看目前聚焦在:桌面類、墻面類、落地類三類物料,而這三類中最具代表的分別是:臺卡、海報、易拉寶。所以,后面的「原則&規(guī)范 」將重點以這三類為案例做分析。

3. 順序與節(jié)奏

從結(jié)論-功能-細致說明「倒金字塔型」結(jié)構(gòu),在線了局景中能短時間內(nèi)快速、有用的將資訊傳達給用戶。將資訊群組化,且依緊張性程度排序,資訊更易傳遞。

以海報級別的物料為例,其版面應具備三種訊息級別:「最高級別的大題目——中等級別的流程圖、功能圖——低級別的使用說明 」 按序有節(jié)奏的遞減;各級別間的差異可能非常顯明,重要取決于物料種類(版面大?。?,某個級別可能特別很是偉大,而另一個級別可能極其細小。

4. 可辨與易讀

中英筆墨體分別是等寬字型和比例字型(筆墨寬度不同)。比例字型的筆墨有各自不同寬度,輸入時會主動調(diào)整字距。因此在編排數(shù)字(英文)字體時:

  • 不許可用中筆墨體輸入;
  • 在雷同字號下,數(shù)字會比中文小,根據(jù)「易讀」原則,需調(diào)整至高度同等的視覺平衡。

5. 平衡與對比

方正蘭亭系列的字體家族至少提供了10種不同字重的字體。我們使用字體家族既可以維持平衡,又可以通過不同字重的強弱關(guān)系 ,產(chǎn)生對比強調(diào)(對比)的部分與和諧(平衡)的部分共存在雷同版面中,可使用粗細比例具有共通性「字體家族」。

如圖所示,越往上越有通亮、輕快、都會、摩登的感覺,越往下越呈現(xiàn)出穩(wěn)固說服力、厚重感。

設定不同的筆墨大小時,若疑心于該呈現(xiàn)多少差距時,可從「等比」、「等差」或「斐波那契」去思考。

這三種對比可以幫助我們?nèi)ニ伎荚摮尸F(xiàn)哪種差距的關(guān)系,當必要使正副題目具有明確大小差異時 ,可以采用差距最大的「等比數(shù)列」。

6. 對齊與留白

文本可以不同的對齊體例來設置:

  • 左對齊:以各行的行首對齊
  • 右對齊:以各行的行末對齊
  • 居中對齊:使軸線位于段落寬度的中心位置

居中對齊后留下的負空間若處理不當,易形成不延續(xù)且停止的灰度值表面。因此將文本設置成「兩端對齊」能產(chǎn)生整齊、幾何形的版式結(jié)果。遵循規(guī)范二的「字距」或規(guī)范七的「圖示法」均有助于可規(guī)避。

依據(jù)前述的線下字體應用的「六大原則」,我們分別細化成:字號、字距、行距、標點等的七條規(guī)范。

二、規(guī)范

1. 字號

根據(jù)「原則一」中提及的人體工程學及福格舉動模型的數(shù)據(jù),設定可參考數(shù)據(jù)如下圖。

以最常用的幾種物料舉例:

  • 大題目:字號依照筆墨個數(shù)不定,一行題目不超過5個字獲取信息最佳;禁止超過9字。
  • 內(nèi)文:手冊、單頁、DM 的常用字級不小于7.5-9pt;海報的常用字級不小于17-23pt;易拉寶的常用字級不小于24-28pt。

2. 字距

  • 中文:當把單字寬度設為一個 a 時,建議字間距的最大極限不要超過1/2a。
  • 數(shù)字:有些數(shù)字的前后會出現(xiàn)「空洞」或「擁擠」的狀態(tài),必須以目測體例作適度調(diào)整。
  • 標點:如「引號」間會有極大空白,破壞團體間隙,亦需按現(xiàn)實情況以目測體例縮小至
    視覺和諧。

3. 行距

  • 內(nèi)文的最佳行距為字號的1.5-2倍左右。
  • 假如物料版面嚴重、信息量分外大(如活動規(guī)則、說明等),可適當縮小至字號的1.2-1.5倍。

4. 禁則筆墨符號

  • 行頭禁則中包括的重要筆墨與符號:句號、逗號、頓號、連字符、分號、冒號、感嘆號、問號、(各種)反括號。
  • 星散禁則中包括的重要筆墨與符號:(各種)正括號。
  • 行末禁則中包括的重要筆墨與符號:兩倍破折號、兩倍省略號。

5. 躍動比

從字體家族中分別選取字龐大且適合閱讀的方正蘭亭大黑與刊黑、細黑、黑做對比,其躍動比值分別為:

  • 黑 vs 大黑:1.83
  • 刊黑 vs 大黑:2.95
  • 細黑 vs 大黑:2.04

雷同字號下的正副題目,采用最佳躍動率為1:2的方正蘭亭細黑&方針蘭亭大黑;當不同字號時(副題目字號小于正題目),亦可選用方正蘭亭準黑(黑)&方針蘭亭大黑。

6. 兩端對齊

在遵循字號、字間距的基礎(chǔ)上,以大題目寬度為基準進行校正。

依照物料種類,海報、易拉寶上大題目(一行)中筆墨數(shù)5字以內(nèi)最佳;禁止超過9字。

題目在做兩端對齊校正時,如已達到「字距」最大極限(規(guī)范二),還可加入「圖示化」手法(規(guī)范七)。

7. 圖示化

三種最常用的體例:

  • 體例一:把須傳達的筆墨框起來
  • 體例二:數(shù)字使用英筆墨體放大透露表現(xiàn);整合成單一個體來配置
  • 體例三:增長圖形符號

呼應 「原則六」中「居中對齊」后的負空間處理,除了「字距調(diào)整, 增長圖形裝飾」等方法調(diào)整至「兩端對齊」。

[教程作者:互聯(lián)網(wǎng)]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di3995.html
餓了么高級設計師界面視覺設計 5 要素
這7個技巧,幫你搞定頁面中背景紋理的設計
圖趣網(wǎng)微信
建議反饋
×