<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-14 訪問量(1325) 評論(0)
        摘要:

            【至成科技按】:“為了創建合適的視覺層次,你需要了解我們的眼睛是如何搜集信息的。”

            今天至成科技給大家帶來的這篇文章中,來自至成科技的網站設計師從理論和實踐兩個角度介紹了網頁UI設計中的視覺層次問題。一個好的藝術家不僅需要擁有創造力,同樣也需要考慮諸如主題、顏色、大小、內容等諸多細節內容,或許還有一件更重要的事——如何留白。這不是件容易的事情,同時也是為何我們如此崇拜達芬奇和梵高的原因。網頁UI設計師同樣需要考慮這些問題。就像在我給你推薦的那本電子書中說得那樣,網頁作為一種新的視覺形式,有它的獨特性,但它同時也必須遵守傳統藝術形式的法則,它是美學原則和商務需求的統一。一個杰出的網頁界面必須顯得輕松又吸引人。

            在這片文章中,至成科技將首先介紹什么是視覺層次和如何實現它,然后我們將會看到它是如何遵照人眼自然移動的規律來運作的。

        視覺組織

        在這篇文章中(與視覺層次的對話)中,本書的作者同時也是西安網站建設的產品設計,解釋了對于網頁的視覺呈現,有哪些元素是必要的:

        • 提醒用戶——做一只看不見的手,網頁的布局應當能指導瀏覽者進行瀏覽同時,避免讓讀者感覺難以忍受。比如,在線支付網站通過引導你滾動鼠標來完成支付過程,同時使用恰當的元件提醒你當前所處的步驟。
        • 交互性的內容聯系——網頁的內容應當依據瀏覽者的信息優先順序進行呈現。比如,在人氣火爆的設計網站中,頂部是大致的分類,中間是詳細的個案展示,較底部則是詳細的分類目錄。
        • 創造情緒化的印象——人們到餐廳里吃飯不僅僅是為了填飽自己的肚子而已,他們同樣對食物的味道,口感,賣相都有要求,甚至還包括良好的用餐氛圍。網站設計也是如此,特別是人們很可能會原諒你網頁上的一些缺點——如果你能夠傳達一種積極的情緒。

        事實上,UI設計的目標歸結起來就是為了解決以下這三個問題:

        • 這是什么(有用性)
        • 我應該如何使用(可用性)
        • 我為什么要關心這個(使用愿望)

        目光的移動是可預見的

        不管是墻角處一閃而過的東西還是大街上從你面前款款走過的美女,你的眼睛很自然地就會聚焦在它(或許是你)感興趣的地方,不是嗎?雖然有些情況下因人而異,但大部分人的注意力轉移都會有明確的趨勢,在瀏覽網頁時也一樣。(在下面的視覺熱點圖中你能很明顯地看出人的注意力是如何發生轉移的)

        在一篇有關視覺原理的文章中,西安網站設計師討論了兩種占主導性的閱讀方式,不過這里討論的兩種方式僅僅是對于書寫習慣是從左至右的民族而言的(阿語系人民表示抗議),讓我們來逐一看下。

        F型布局(樹形模式)

            對于典型的文字占主體地位的網頁(比如博客),設計的時候都會采用F型的布局模式。瀏覽者們首先會掃描一下頁面左邊,豎直方向上的文字信息,來尋找令他們感興趣的話題或者段落的起始句子。

            當瀏覽者找到了他喜歡的東西的時候,他們就開始閱讀了,他們的視線向水平方向上轉移。較終的結果就是他們的視線熱點圖會呈現字母F或E的形狀。CNN和NYTimes兩個新聞網站用的就是F型布局。至成科技完成了一項基于232名瀏覽者者和數千個頁面訪問的檢驗試驗,并且列出了以下幾條關于F型布局的實踐要點:

        • 瀏覽者很少會逐字逐句地閱讀。
        • 頭兩段是較重要的,應該足夠博人眼球。
        • 起始段落,小標題得足夠有噱頭。

        這些要點如何幫助你完成界面設計?請看下圖:

            你可以在這幅圖中看到,較主要的信息都能一眼看見,而更加細節的東西通過引導都能馬上定位。

            F型布局結構對于那些包含廣告,或者呼告和內容沒太大關系的頁面很適用。記住,內容為王。F型布局是一種引導方式,而不是一種萬用藥——瀏覽者很快就會在看過幾個這樣的F型頁面布局之后開始感到無趣,用內容——而不是布局方式——抓住他們。

        Z型布局(對角模式)

            Z型布局主要會用于非文本主導的頁面閱讀。瀏覽者首先瀏覽橫貫頁面頂部的水平標題欄目(不管是因為它是菜單欄,還是因為你從左到右的閱讀習慣)。當視線到達這一行的末尾的時候,它就會轉而向左下方(同樣是基于你的閱讀習慣),然后橫向地閱讀底部的部分。

            這種Z型布局格式可以應用于幾乎所有的網頁界面,因為它強調了現在網頁設計的核心需求,如:層次感,品牌感和交互。Z型布局對于那些要求界面簡潔明快,網頁間跳轉由交互性設計負責實現的網頁,是非常適合的。

            想要在Z型布局界面中塞入復雜的信息,就不如改用F型布局來得好一些。但是Z型布局帶來的好處就是結構的簡潔和有秩序。這里有幾條實操經驗,你較好牢牢記住它們:

        • 背景:將背景和要呈現的內容作對比,以便于瀏覽者能夠關注你的內容框架。
        • 點1:為你的Logo找到一個顯眼的位置,比如說這里。
        • 點2:在這些位置添加一些鏈接或交互性元件來幫助瀏覽者更好的瀏覽網頁。
        • 網頁的正中間:一個帶著幾行文字的精美圖片可以將網頁的上部和下部區分開來,并且瀏覽者的注意力能按照我們設想的Z字線路轉移。
        • 點3:增加要點(內容),并沿著水平軸向擴展,將瀏覽者的目光引導到你在點4放置的的主要呼告上。
        • 點4:這里是重點,一個為你的主要呼告(捐款,加盟,注冊等)預留的理想的位置。

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

            能夠預測瀏覽者目光所至,能夠為你帶來巨大的好處。在組織你頁面上的元素之前,對它們排列優先順序。一旦你明確了你想呈現給瀏覽者的東西,剩下的工作就是簡單的將它們放置在這兩種模式的熱點上。如果你感覺需要在提出你的主要呼告之前提供給用戶更多的信息,你甚至可以將Z模式拓展到整個頁面上,將我列舉的步驟重復若干次,事實上,很多網頁現在都在這么干。

        【干貨超多的精品好文合集】:

        深度介紹網站交互式設計!
        《漲姿勢!值得了解的交互設計五大支柱》

        超酷炫的網站設計!
        《給跪了!絕對值得體驗的較佳炫酷網站》

        網站導航設計效果!
        《腦洞大開!舒服的圓形導航網站設計》


        網友評論

        登錄后可評論,請登錄

        全部評論: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计划