<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »超實用!網站設計排版快速指南

        超實用!網站設計排版快速指南

        至成科技 2015-10-15 訪問量(2379) 評論(0)
        摘要:

            【至成科技按】:無論是對于印刷、網站設計或是電視廣告來說,排版都是我們用來溝通信息的主要方式。排版之重要性我想已無須贅述。然而,“理解”和“實踐”還是相差十萬八千里的,特別是在網站設計中,“一個字號走天下”的想法可以歇歇了。我們或許都聽說過響應式網站,但我想你們中可能很少有人知道什么是響應式排版吧。

            下面至成科技(西安網站設計)會給你們展示響應式排版的重要性,以及如何簡單地實踐它。

        排版不是件小事

            排版是網站設計中非常基礎但又無比重要的一環,這點我想大家都認同。在網站設計中,排版早些年的日子比較苦逼,或者說其很難得到與之重要性相匹配的待遇——和很多其它的設計元素一樣,那時我們并不具備在網站中完整表現它們的技術。但幸運的是,我們走過來了。

            排版能幫助我們溝通信息,這可不是一件小事。先進的排版能有助于溝通的過程明晰、高效。可讀性是所有設計都需要面對的大課題。那么現在,我們就來親手實踐下。

        配置你的內容

        下面你可以看到一張只顯示文字的圖片。這是我從至成科技官網上隨意復制黏貼過來的一段文字,然后把它放到HTML文檔里顯示出來。

            這看起來很簡陋,而且難以閱讀。上面的這張截圖顯示的是瀏覽器默認的16px Times New Roman字體。既然這樣,我們就先試試看把它升級到18px的PT Serif字體(至成科技出品)。

        xys20151012 (2)

            然后我們需要對每一行的字符數量做下調整。在桌面端,每一行的字符量應該在60到75之間。于是我把整個文本的寬度調整到580px。你自己對比看看上下兩張圖就知道孰優孰劣了。不過別掉以輕心,一切才剛剛開始。

        垂直排版的韻律感

           在我們當前的網頁設計中,可以看到其垂直方向的韻律依然還是瀏覽器默認的狀態,而不同瀏覽器上的顯示是不同的。這可不行,我們需要搞清楚到底什么才是合適的行高、邊距以及字號。在之前提到過我把默認的文本大小改成了18px,那么對于我來說,它就是1em。

           我想大家作為網頁設計師應該都明白em是什么東西吧,有一堆工具可以幫助你來進行此類換算。Pascal Cauhepe的Vertical Rhythm Tool是我較喜歡的工具之一,另外再推薦個Tuomas Jomppanen 和Ville Vanninen開發的Gridlover,也很好用~

            在我的設計中,文章段落的字號和行高分別是18px/1.77 (也就是32px)。我參照黃金比例來調整標題的字號,也就是說H1現在是3ems(54px)。下面是我定義的不同字號節點,所有這些都會被應用在同樣32px行高的基線柵格里:

        字體大小

        P 18px (1em)

        H1 54px (3em)

        H2 45px (2.5em)

        H3 36px (2em)

        H4 32px (1.75em)

        H5 27px (1.5em)

        H6 18px (1em)

        簡單吧?很容易就可以搞明白怎么整這縱向的柵格了。然后下一步就可以考慮水平方向的柵格如何定義。

        等比縮小

            很多時候我們在縱向排版的韻律確定后就會迫不及待地去折騰顏色、柵格甚至布局。搞清楚柵格系統里的節點確實重要,但是你不能因此無視響應式排版,根據屏幕尺寸調整垂直排版的韻律感同樣需要琢磨。在移動設備上使用與桌面端一模一樣的字號和字距就和使用同一套柵格一樣荒謬。無線端和桌面端的區別極大,其上的閱讀體驗也大不相同。

            至成科技在2012年時寫的一篇“Responsive Typography: the Basics”中提到了使用手機和電腦進行閱讀時眼睛與設備之間的距離是不同的,而這正是對閱讀體驗造成影響的本因。從下面這張圖片可以看到,在移動設備上,18px的字號顯然太大了些。它就像把所有東西一下放大的同時卻沒有提供有助于閱讀體驗的視覺平衡。

        移動設備上的垂直排版韻律

            如果你在意產品的移動網站體驗那你必須要首先著意排版。在那樣一個狹窄的320px寬度的空間里,所有諸如材質、漸變等裝飾性都應該靠邊站。我并不是說那些不重要,它們只是沒有文本內容的優先級那么高罷了。要記住優化排版的顯示是創建良好閱讀體驗的先進步。

            先進步,正如我之前說的那樣,先把字號縮小了再說。與電腦屏幕相比,我們通常會把手機拿得離臉更近,這意味著即便我們用14px的字號也有效能看得很清楚。在移動設備上,每一行35-40個字符是較合適的。

        設置全新的韻律

        字號:桌面 字號: 移動

        P 18px (1em) 14px(1em)

        H1 54px (3em) 35px(2.5em)

        H2 45px (2.5em) 31px(2.25em)

        H3 36px (2em) 24px(2em)

        H4 32px (1.75em) 21px(1.5em)

        H5 27px (1.5em) 18px(1.25em)

        H6 18px (1em) 14px(1em)

            OK,現在你可以把改好的上圖和之前的桌面版本對比一下。另外,我把行高改成了22px,看起來還是蠻順眼的。如果這個字體本身再細一些或許我會考慮20px的行高,但目前來看,至少對于PT Serif而言,22px的行高對我來說是較合適的。

            至成科技在Typecast曾發表過一篇關于響應式排版的文章:“A More Modern Scale for Web Typography.”如果你英文湊合的話強烈建議讀一讀。他在文中提到了等比縮放排版于不同節點的重要性,同時還有三條關于排版的要點。

            “搞清楚人們是如何閱讀的;能愜意地掃讀某一行文字然后在輕松跳回下一行開頭;快速理解不同文章之間各個標題的優先級和重要性。”當排版能做到這三點時,閱讀體驗就會讓人滿意。

        至成科技(西安網站設計)總結:

            網站設計排版的重要性不言而喻,千萬不要在不同設備上使用同一套字號及字距。你要知道你看手機的方式和看筆記本、臺式顯示器大不相同。為響應式設計適配不同的垂直排版韻律是很重要的,若能迎合用戶的潛在需求,那你就可以創建更好的用戶體驗。較后重申一遍:排版不是小事,不要掉以輕心!

        【十月份網站設計干貨分享:】

        Step 1:打好設計基礎是關鍵呦!
        《從現實到網站!暖到心窩里的情感化設計》

        Step 2:進階技巧!向高手模仿是捷徑!
        《視覺盛宴!利用色彩沖突的網站設計》

        Step 3:直接開掛!不高級但一定正確!
        《解讀:高級banner成就高大上的網站》

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 c罗总进球数630 互联网彩票销售额 腾讯分分彩四星挂机稳赚方案 青海十一选五今天开奖结果查询 德甲赛程表20192019 足彩17001期投注策略 沙滩排球3 云网快乐8 海王星娱乐平台 中国竞彩网官方论坛 22选5跨度 排列五走势图体坛 东方6十1走势图 河南快赢481网购 反赌推二八杠揭秘