如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

如何優(yōu)化網(wǎng)站的內(nèi)部結(jié)構(gòu)？網(wǎng)站內(nèi)部結(jié)構(gòu)優(yōu)化是網(wǎng)站SEO過(guò)程中不可缺少的環(huán)節(jié)，在網(wǎng)站建設(shè)的初期就要做好設(shè)置工作。網(wǎng)站內(nèi)部結(jié)構(gòu)的優(yōu)化主要包括：網(wǎng)站結(jié)構(gòu)、頁(yè)面元素、后期優(yōu)化等，下面就從這幾個(gè)方面為大家講解，希望能給一些不了解的朋友提供實(shí)質(zhì)性的指導(dǎo)作用。

      1、結(jié)構(gòu)目錄

目錄的設(shè)計(jì)是網(wǎng)站建設(shè)中很關(guān)鍵的環(huán)節(jié)，是一個(gè)網(wǎng)站的骨架，所以網(wǎng)站目錄直接關(guān)系到用戶的體驗(yàn)。建議：目錄的組織結(jié)構(gòu)從首頁(yè)到內(nèi)容頁(yè)點(diǎn)擊不超過(guò)三次，也就是三級(jí)：首頁(yè)-欄目頁(yè)-內(nèi)容頁(yè)。目錄名可采用網(wǎng)站的一些核心產(chǎn)品詞。

2、鏈接

我們說(shuō)一個(gè)網(wǎng)站的優(yōu)化最重要的兩點(diǎn)是什么？對(duì)，是鏈接和關(guān)鍵詞。如果說(shuō)目錄是一個(gè)網(wǎng)站的骨架，那么鏈接就是網(wǎng)站的血液。建議：網(wǎng)站鏈接的設(shè)置以英文形式展現(xiàn)，簡(jiǎn)短易懂，使用靜態(tài)化URL，迎合搜索引擎的喜好，更好的服務(wù)于網(wǎng)站優(yōu)化。

3、robots協(xié)議

robots.txt相當(dāng)于網(wǎng)站的一張臉，一張接客的臉，接的搜索引擎的蜘蛛（或機(jī)器人、爬蟲(chóng)）。它是一種抓取協(xié)議文件，用于告訴搜索引擎spider，此網(wǎng)站中的哪些內(nèi)容是不應(yīng)被搜索引擎的索引，哪些是可以被索引的。

現(xiàn)在很多地方都有自動(dòng)生成工具，百度站長(zhǎng)工具，或者一些插件等，根據(jù)自己的喜好選擇使用。這里有一個(gè)小技巧，將網(wǎng)站的地圖鏈接放置在robots內(nèi)，對(duì)網(wǎng)站的收錄絕對(duì)是不小的幫助。具體方法：在最后一行增加 Sitemap：http://www.example.com/sitemap.xml。

4、Sitemaps

Sitemaps就是一個(gè)管家，總結(jié)統(tǒng)計(jì)網(wǎng)站的數(shù)據(jù)鏈接，將匯總的結(jié)果更好的展現(xiàn)給網(wǎng)站的客人-搜索引擎spider。

Sitemaps一般有html與XML兩種格式。目前百度、Google、雅虎、微軟等搜索引擎都支持Sitemaps，Sitemaps的提交可以通過(guò)各個(gè)搜索引擎的站長(zhǎng)平臺(tái)提交，也可以將其地址放在robots.txt文件里，上面已經(jīng)說(shuō)過(guò)了。

5、404頁(yè)面

  404頁(yè)面是客戶端在瀏覽網(wǎng)頁(yè)時(shí)，服務(wù)器無(wú)法正常提供信息，或是服務(wù)器無(wú)法回應(yīng)，且不知道原因所返回的頁(yè)面。據(jù)說(shuō)在第三次科技革命之前，互聯(lián)網(wǎng)的形態(tài)就是一個(gè)大型的中央數(shù)據(jù)庫(kù)，這個(gè)數(shù)據(jù)庫(kù)就設(shè)置在404房間里面。那時(shí)候所有的請(qǐng)求都是由人工手動(dòng)完成的，如果在數(shù)據(jù)庫(kù)中沒(méi)有找到請(qǐng)求者所需要的文件，或者由于請(qǐng)求者寫錯(cuò)了文件編號(hào)，用戶就會(huì)得到一個(gè)返回信息:room 404 : file not found。404錯(cuò)誤信息通常是在目標(biāo)頁(yè)面被更改或移除，或客戶端輸入頁(yè)面地址錯(cuò)誤后顯示的頁(yè)面，人們也就習(xí)慣了用404作為服務(wù)器未找到文件的錯(cuò)誤代碼了。當(dāng)然實(shí)際考證傳說(shuō)中的room 404是不存在的，在http請(qǐng)求3位的返回碼中，4開(kāi)頭的代表客戶錯(cuò)誤，5開(kāi)頭代表服務(wù)器端錯(cuò)誤。

6、nofollow標(biāo)簽

nofollow標(biāo)簽是盡量減少垃圾鏈接對(duì)搜索引擎的影響，當(dāng)超鏈接中出現(xiàn)nofollow標(biāo)簽后，搜索引擎會(huì)不考慮這些鏈接的權(quán)重，也不用使用這些鏈接用于排名。

nofollow標(biāo)簽通常有兩種使用方法：一種方法是將"nofollow"寫在網(wǎng)頁(yè)上的meta標(biāo)簽上，例如：。另一種方法是將"nofollow"放在超鏈接中，例如： 。

需要注意的是，如果一個(gè)網(wǎng)站鏈向了某些被搜索引擎認(rèn)為是垃圾網(wǎng)站的地址，那么這個(gè)網(wǎng)站的權(quán)重也會(huì)受到影響。因此對(duì)于一個(gè)網(wǎng)站來(lái)說(shuō)，nofollow標(biāo)簽的使用十分必要。

7、統(tǒng)計(jì)代碼

網(wǎng)站統(tǒng)計(jì)分析工具應(yīng)該是每一位站長(zhǎng)都了解的，現(xiàn)在常用的就是百度統(tǒng)計(jì)、cnzz、谷歌分析、51等，具體的就不做介紹了。網(wǎng)站統(tǒng)計(jì)代碼添加時(shí)，為了不 影響網(wǎng)站的加載速度，最好放在網(wǎng)站底部。

      相關(guān)拓展：關(guān)鍵詞的爬行和抓取

       搜索引擎派出一個(gè)能夠在網(wǎng)上發(fā)現(xiàn)新網(wǎng)頁(yè)并抓文件的程序，這個(gè)程序通常稱之為蜘蛛。搜索引擎從已知的數(shù)據(jù)庫(kù)出發(fā)，就像正常用戶的瀏覽器一樣訪問(wèn)這些網(wǎng)頁(yè)并抓取文件。搜索引擎會(huì)跟蹤網(wǎng)頁(yè)中的鏈接，訪問(wèn)更多的網(wǎng)頁(yè)，這個(gè)過(guò)程就叫爬行。這些新的網(wǎng)址會(huì)被存入數(shù)據(jù)庫(kù)等待抓取。所以跟蹤網(wǎng)頁(yè)鏈接是搜索引擎蜘蛛發(fā)現(xiàn)新網(wǎng)址的最基本的方法，所以反向鏈接成為搜索引擎優(yōu)化的最基本因素之一。沒(méi)有反向鏈接，搜索引擎連頁(yè)面都發(fā)現(xiàn)不了，就更談不上排名了。

       搜索引擎抓取的頁(yè)面文件與用戶瀏覽器得到的完全一樣，抓取的文件存入數(shù)據(jù)庫(kù)。

藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

編者按：作為今年大熱的設(shè)計(jì)趨勢(shì)，響應(yīng)式已然是設(shè)計(jì)師的標(biāo)配技能。今天阿里的同學(xué)從響應(yīng)式設(shè)計(jì)的布局類型、布局實(shí)現(xiàn)兩方面深入講解，有哪些實(shí)現(xiàn)布局的方式，該采用何種方式，都有相當(dāng)專業(yè)細(xì)致的解答，不多說(shuō)，來(lái)收 >>>

大部分視覺(jué)設(shè)計(jì)師在工作中都會(huì)遇到logo UI設(shè)計(jì)，每個(gè)UI設(shè)計(jì)師都有自己獨(dú)特的思路和方法。在設(shè)計(jì)過(guò)程中有理性的方法也有感性的發(fā)揮，我接下來(lái)講的理性的部分比較多，因?yàn)楦行缘臇|西跟個(gè)人平時(shí)的積累、經(jīng)驗(yàn)、生活閱歷等等相關(guān)。不是什么大神，寫的都是自己慢慢沉淀下來(lái)的方式方法。Logo的意義和重要性，在這不再贅述，我主要講logo設(shè)計(jì)的每個(gè)階段個(gè)人覺(jué)得比較重要的幾點(diǎn)。

國(guó)外非常高端的UI界面設(shè)計(jì)，UI設(shè)計(jì)小白須學(xué)

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

介紹Promise

promise的概念和實(shí)現(xiàn)最初來(lái)源于社區(qū)，用于解決異步編程的回調(diào)嵌套問(wèn)題，即將多級(jí)的嵌套改良成順序的代碼行。ES6將其寫入了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，提供了原生的Promise。

Promise是一個(gè)構(gòu)造函數(shù)，用于生成一個(gè)Promise實(shí)例。Promise實(shí)例代表一次異步操作。 它只可能有3種轉(zhuǎn)態(tài)，分別是Pending(未決議), Resolved(完成) 和 Rejected(出錯(cuò)) 。

創(chuàng)建一個(gè)Promise實(shí)例時(shí)，其處于Pending狀態(tài)，當(dāng)異步操作完成，執(zhí)行回調(diào)函數(shù)的時(shí)候，根據(jù)回調(diào)函數(shù)中的err的值，如果err 為空則異步操作成功，否則異步操作失敗。此后，Promise實(shí)例的狀態(tài)將不再改變。

Promise實(shí)例

var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失敗則將Promise對(duì)象置為rejected狀態(tài) } else {
                resolve(data); //成功則將Promise對(duì)象置為resolved轉(zhuǎn)態(tài) }
        });
    });
} /*pro是一個(gè)函數(shù)
 調(diào)用該函數(shù)返回一個(gè)Promise實(shí)例
*/ var promiseObject = pro(); /*then方法執(zhí)行Resolved和Rejected狀態(tài)的回調(diào)函數(shù)*/ promiseObject
.then(doneCallbacks, failCallbacks)
.catch(function(err) { console.log(err);
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
};
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

    

catch是then的一個(gè)語(yǔ)法糖，相當(dāng)于

promiseObject.then(undefined, function(err) {
    console.log(err)
});
    


        

            1
        

        

            2
        

        

            3
        

    

Promise對(duì)象的錯(cuò)誤具有向后傳遞的性質(zhì)，因此，如果在調(diào)用過(guò)程拋出異常，則異?？偰鼙蛔詈笠粋€(gè)catch捕獲。這也是為什么我們習(xí)慣在then的調(diào)用后跟隨一個(gè)catch調(diào)用。

then的鏈?zhǔn)綄懛?

then 方法是定義在構(gòu)造函數(shù)Promise 的原型對(duì)象上的。這個(gè)方法為Promise實(shí)例添加狀態(tài)改變時(shí)的回調(diào)函數(shù)。then方法返回一個(gè)新的Promise實(shí)例，因此then方法后面可以調(diào)用then（）方法。傳給then()方法的函數(shù)，可返回三類值，分別如下：

• 一個(gè)Promise實(shí)例
• 一個(gè)普通值
• 拋出一個(gè)異常

如果返回的是一個(gè)新的Promise對(duì)象，則下一級(jí)的then接收函數(shù)在這個(gè)Promise實(shí)例 狀態(tài)發(fā)生改變時(shí)被觸發(fā)執(zhí)行。因此，then的鏈?zhǔn)綄懛?，可以按順序?zhí)行一系列的異步操作，并且后一個(gè)異步操作在前一個(gè)完成之后開(kāi)始。如下代碼實(shí)例所示：

var fs = require('fs'); var pro = function () { return new Promise(function(resolve, reject) { fs.readdir(_dirname, function(err, data) { if (err) {
                reject(err); //失敗則將Promise對(duì)象置為rejected狀態(tài) } else {
                resolve(data); //成功則將Promise對(duì)象置為resolved轉(zhuǎn)態(tài) }
        });
    });
} var newPro = function(data) { return new Promise(function(resolve, reject) { setTimeout(function(){ resolve(data);
        },2000);
    });
}; /*pro是一個(gè)函數(shù)
 調(diào)用該函數(shù)返回一個(gè)Promise實(shí)例
*/ var promiseObject = pro(); /*then方法執(zhí)行Resolved和Rejected狀態(tài)的回調(diào)函數(shù)*/ promiseObject
    .then(function(data){ console.log("fisrt sync op");
        console.log(data); return newPro(data);//返回一個(gè)新的Promise對(duì)象 })
    .then(function(data) { console.log("second sync op");
        console.log(data);//兩秒鐘后才會(huì)被執(zhí)行 })
    .catch(function(err) { console.log(err);
    });

promiseObject.then(undefined, function(err) { console.log(err)
}); var doneCallbacks = function(data) { console.log(data);
}; var failCallbacks = function(err) { console.log(err)
}; 
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

        

            26
        

        

            27
        

        

            28
        

        

            29
        

        

            30
        

        

            31
        

        

            32
        

        

            33
        

        

            34
        

        

            35
        

        

            36
        

        

            37
        

        

            38
        

        

            39
        

        

            40
        

        

            41
        

        

            42
        

        

            43
        

        

            44
        

        

            45
        

        

            46
        

        

            47
        

        

            48
        

        

            49
        

        

            50
        

        

            51
        

        

            52
        

        

            53
        

    

把上一級(jí)異步調(diào)用的結(jié)果返回給下一級(jí)調(diào)用，then這樣的鏈?zhǔn)綄懛?，解決了回調(diào)函數(shù)的多層嵌套調(diào)用。

解決異步嵌套回調(diào)的更多方案

“回調(diào)金字塔”

多層嵌套

bluebird庫(kù) + Generator

當(dāng)我還是一枚單純的p圖師的時(shí)候，誰(shuí)要是叫我美工，我是拒絕的！我跟他們講，我是設(shè)計(jì)師，是能duang的一下就加的設(shè)計(jì)師。突然有一天，有人問(wèn)起我什么是UI，作為一枚經(jīng)歷了歲月沉淪能寫點(diǎn)代碼能P圖的大美工（此刻我已經(jīng)不拒絕美工的稱呼了，因?yàn)橐龅胶每凑娴牟荒敲春?jiǎn)單）我告訴他，我就是，然而他不信，他覺(jué)得UI設(shè)計(jì)師該是高大上的，是美工需要仰視的！

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

隨著越來(lái)越的的app使用沉浸式狀態(tài)欄，有必要對(duì)沉浸式狀態(tài)欄學(xué)習(xí)一下，查看了很多資料，沉浸式狀態(tài)欄重要的無(wú)法三點(diǎn)：1.實(shí)現(xiàn)全屏 （Android4.4跟5.0全屏處理方式有別需分開(kāi)處理 ）2.設(shè)置全屏之后為了保證自己寫的布局不與狀態(tài)欄重疊，需要在跟xml的跟布局設(shè)置android:fitsSystemWindows=”true” 。基于這幾點(diǎn)處理方式可能很多，但是為了便于項(xiàng)目中工具類封裝，本編實(shí)現(xiàn)方式均已代碼方式呈現(xiàn)，xml設(shè)置方式可以自行查閱相關(guān)資料 3.改變狀態(tài)欄顏色

—1.全屏設(shè)置 
對(duì)于4.4以上系統(tǒng)，因4.4以上系統(tǒng)是可以設(shè)置全屏，代碼如下：

window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); 


    

        1
    

    

        2
    

對(duì)于5.0系統(tǒng) 具體代碼

window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

僅僅做全屏處理，我們會(huì)發(fā)現(xiàn)不管是在4.4系統(tǒng)上還是在5.0系統(tǒng)上，我們的布局內(nèi)容會(huì)與狀態(tài)欄內(nèi)容出現(xiàn)重疊。

下圖為4.4系統(tǒng) 

下圖為8.0系統(tǒng) 

為了解決全屏設(shè)置重疊狀態(tài)欄，我們需要在全屏之上預(yù)留狀態(tài)欄的高度以便正常顯示狀態(tài)欄，而處理方式也很簡(jiǎn)單 activity layout根目錄添加下面代碼 
android:fitsSystemWindows=”true” 而此處我建議用代碼設(shè)置,因?yàn)橥ǔＮ覀冺?xiàng)目中會(huì)提取BaseActivity基類抽出一些共性，這種方式比在每個(gè)xml中設(shè)置屬性更方便 
rootView.setFitsSystemWindows(true) 此處的rootView指的就是activity對(duì)應(yīng)的跟布局； 
進(jìn)行以上處理之后我們會(huì)發(fā)現(xiàn)現(xiàn)在狀態(tài)欄跟我們的布局內(nèi)容不再重疊了，接下來(lái)我們就只需要處理狀態(tài)欄的顏色問(wèn)題了。具體代碼如下

ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

對(duì)于4.4系統(tǒng)因?yàn)闆](méi)有改變狀態(tài)欄顏色的api，我們可以通過(guò)添加一個(gè)與狀態(tài)欄等高的View到根布局的父容器中，而根布局的父容器就是一個(gè)ID為android.R.id.content的幀布局被裝飾的容器中，這樣只需要設(shè)置View的顏色即可。對(duì)于5.0及以上系統(tǒng)，因已提供設(shè)置狀態(tài)欄和導(dǎo)航欄顏色的api，直接設(shè)置即可； 
對(duì)于4.4以上5.0一下系統(tǒng)

View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.RED); content.addView(view); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

對(duì)于5.0及以上系統(tǒng)

window.setStatusBarColor(Color.RED); 


    

        1
    

獲取狀態(tài)欄高度

 private int getStatusHeight() { int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){ return getResources().getDimensionPixelSize(resourceId);
        } return 0;
    } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

以上就是實(shí)現(xiàn)沉浸式狀態(tài)欄的具體過(guò)程。整體代碼如下：

package com.example.administrator.myjavadeamo.activity; import android.graphics.Color; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import com.example.administrator.myjavadeamo.R; public class StatusBarActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE);//隱藏標(biāo)題欄 setContentView(R.layout.activity_status_bar); initWindow(); }

    private void initWindow() {
        Window window=getWindow(); if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.LOLLIPOP){
            //5.0以上的手機(jī)
            window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN|View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }
            window.setStatusBarColor(Color.GREEN); }else if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.KITKAT){
            //4.4以上5.0一下的手機(jī)
            window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); ViewGroup content= (ViewGroup) findViewById(android.R.id.content); ViewGroup childView= (ViewGroup) content.getChildAt(0); if(childView!=null){
                childView.setFitsSystemWindows(true); }

            View view=new View(this); view.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,getStatusHeight())); view.setBackgroundColor(Color.GREEN); content.addView(view); }
    } /**
     * 獲取狀態(tài)欄高度
     * @return
     */ private int getStatusHeight() {
        int statusHeight=-1; int resourceId=getResources().getIdentifier("status_bar_height","dimen","android"); if(resourceId>0){
           return getResources().getDimensionPixelSize(resourceId); }
        return 0; }
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

    

        52
    

    

        53
    

    

        54
    

    

        55
    

    

        56
    

    

        57
    

    

        58
    

    

        59
    

    

        60
    

    

        61
    

    

        62
    

    

        63
    

    

        64
    

    

        65
    

    

        66
    

    

        67
    

最終實(shí)現(xiàn)結(jié)果：

4.4系統(tǒng) 
 
8.0系統(tǒng)

藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

- 硬件+遠(yuǎn)距離操控——基本交互 -

基于桌面資料研究以及設(shè)計(jì)經(jīng)驗(yàn)，總結(jié)了基本交互主要包含以下幾個(gè)關(guān)鍵內(nèi)容：遙控器輸入、導(dǎo)航和菜單、信息展現(xiàn)、控件擺放和焦點(diǎn)狀態(tài)。

一 、遙控器輸入

當(dāng)我們用手指快速便捷地在手機(jī)屏幕上點(diǎn)擊或滑動(dòng)時(shí)，主流電視大屏及應(yīng)用的操作還是：使用遙控器進(jìn)行操作。而市面上不同電視生產(chǎn)商生產(chǎn)的遙控器也有著不同的造型和按鍵數(shù)量，如圖1，分別展示了：蘋果、谷歌、小米、樂(lè)視和中興機(jī)頂盒的遙控器。

圖1 不同廠商的遙控器

盡管有著千奇百怪的造型和按鍵數(shù)量，但幾乎全部的遙控器都有幾個(gè)相同的按鍵：上、下、左、右、返回鍵和OK鍵，如圖2。它們也夠成了遙控器輸入的基本交互方式：通過(guò)“上下左右鍵”移動(dòng)焦點(diǎn)位置，選中界面元素，按“OK鍵”進(jìn)行相關(guān)操作，按“返回鍵”返回。

圖2 遙控器的基本按鍵

而上圖中還有一些按鍵，如數(shù)字鍵、菜單鍵，有些遙控器是沒(méi)有它們的。這里強(qiáng)調(diào)下“菜單鍵”，比如之前的一個(gè)設(shè)計(jì)，將不常用的操作隱藏到菜單鍵中，當(dāng)用戶按菜單鍵時(shí)再喚出操作（如安卓端的“長(zhǎng)按”，iOS端的“左滑”等）。后來(lái)，才發(fā)現(xiàn)并不是所有遙控器都有該按鍵，只能在后續(xù)版本中迭代優(yōu)化。因此，在設(shè)計(jì)之前，不妨研究一下你的輸入硬件設(shè)備，避免因“刻板印象”造成不必要的坑。

遙控器輸入的特性決定了用戶在輸入時(shí)的效率和便捷程度都大打折扣，因此，在這樣的局限下，設(shè)計(jì)師只能通過(guò)各種不同的方式來(lái)盡量減弱這種不便捷：

1. 減少用戶輸入

能不讓用戶輸入就不輸入，盡量只讓用戶去做“選擇型”輸入，避免大量“文字型”輸入，比如電視上的搜索功能中，及時(shí)聯(lián)想、熱搜詞就變得極為重要，如圖3右圖所示。

圖3 鍵盤輸入的優(yōu)化

2. 優(yōu)化輸入模式

結(jié)合項(xiàng)目情況，去嘗試優(yōu)化輸入模式，比如充分利用遙控器數(shù)字鍵輸入、重新設(shè)計(jì)鍵盤以減少用戶操作，如圖3所示。

3. 將輸入轉(zhuǎn)移

越來(lái)越多的產(chǎn)品開(kāi)始將一些輸入轉(zhuǎn)移并引導(dǎo)到手機(jī)端進(jìn)行操作，甚至將手機(jī)端直接做為遙控器，比如最常見(jiàn)的掃碼登錄和TV助手類APP。輸入轉(zhuǎn)移能大大提升用戶操作效率，但設(shè)計(jì)時(shí)還是要結(jié)合具體場(chǎng)景，避免用戶過(guò)多地在手機(jī)和遙控器間切換。

4. 創(chuàng)新的輸入方式

隨著各種技術(shù)的發(fā)展，在未來(lái)，電視端也會(huì)有越來(lái)越多的輸入方式，而不僅限于遙控器輸入，如智能語(yǔ)音輸入，而我們也需要了解這些新技術(shù)，才能幫助我們不斷的創(chuàng)新并給用戶帶來(lái)優(yōu)秀的體驗(yàn)。

二、導(dǎo)航和菜單

電視端的導(dǎo)航和菜單大多數(shù)和手機(jī)端、PC端是類似的，但因遙控器輸入的特性或多或少的有些差異，主要分為以下幾類：

1. 十字

十字導(dǎo)航在國(guó)內(nèi)的產(chǎn)品中比較少見(jiàn)，但因它的主導(dǎo)航和二級(jí)導(dǎo)航同時(shí)展開(kāi)，能與十字方向鍵完美契合，用戶可通過(guò)方向鍵在主導(dǎo)航和二級(jí)導(dǎo)航之間以最的方式切換，如圖4所示。但它最多展現(xiàn)2級(jí)菜單，即縱向菜單和橫向菜單，又浪費(fèi)了大量界面空白，因此針對(duì)國(guó)內(nèi)大而全的產(chǎn)品而言，往往不是特別適用。

圖4 十字導(dǎo)航

2. 磁貼

磁貼廣泛應(yīng)用于各種電視應(yīng)用產(chǎn)品，一般包含主導(dǎo)航和二級(jí)磁貼，往往二級(jí)磁貼的展現(xiàn)能使信息更加扁平、直觀及可視化，且相比于十字導(dǎo)航，操作的方向不會(huì)受到限制；但往往焦點(diǎn)從磁貼移回到左側(cè)/上側(cè)導(dǎo)航需要更多的操作成本，如圖5所示。磁貼的信息展現(xiàn)能夠充分利用界面空間，并把信息前置，因此，對(duì)很多內(nèi)容型產(chǎn)品而言，磁貼可以很好的適用內(nèi)容露出，吸引用戶進(jìn)入。

圖5 磁貼信息展示

3. Tab

廣泛應(yīng)用于手機(jī)端和PC端，當(dāng)然在電視端中也經(jīng)常使用，往往起到一級(jí)導(dǎo)航的作用，在告知用戶所處位置的同時(shí)，很好的引導(dǎo)用戶進(jìn)行模塊間的切換，如圖6所示。然而，Tab導(dǎo)航也有一些基本的設(shè)計(jì)要求，比如盡量不使用多層Tab套用，即使不得已套用也需盡量保證表現(xiàn)形式不同；另外，在“焦點(diǎn)”的章節(jié)，也還會(huì)提到Tab切換時(shí)的加載問(wèn)題。

圖6 Tab導(dǎo)航

4. 列表

列表也是手機(jī)端最常用的菜單展現(xiàn)形式，在電視端同樣適用，如電視直播類產(chǎn)品，主功能就利用了多層列表套用的展現(xiàn)形式，詳見(jiàn)圖7所示。而在電視端，列表的樣式也是多種多樣的：如純文字列表（可配按鈕）、圖文列表（可配按鈕）、展示型列表（不可操作）、橫向列表（選集列表）等。

圖7 圖文列表和展示型列表

5. 其他

電視產(chǎn)品上最常用的菜單和導(dǎo)航模式一般都可以總結(jié)為以上4種，當(dāng)然還有一些其他的方式。隨著用戶多設(shè)備的使用，越來(lái)越多的手機(jī)端和PC端的設(shè)計(jì)模式開(kāi)始在電視上出現(xiàn)；而更多的產(chǎn)品界面因其復(fù)雜的功能無(wú)法只使用1種菜單和導(dǎo)航模式，往往是混合型設(shè)計(jì)，如圖8所示。不過(guò)，無(wú)論使用何種導(dǎo)航和菜單類型，電視大屏幕的菜單和導(dǎo)航的設(shè)計(jì)目標(biāo)終歸是：用戶可以快速定位，并且能夠預(yù)測(cè)出操作結(jié)果。因此，靈活使用導(dǎo)航和菜單，使用戶不會(huì)迷失在功能繁多的界面信息中就尤為重要。

圖8 其他類型的導(dǎo)航和菜單

三、信息展現(xiàn)

在前面的文字中，我在“電視”這個(gè)詞后面都緊跟了“大屏”這個(gè)詞，電視的屏幕是比PC還要大的屏幕；而用戶也因?yàn)槿绱舜蟮钠聊?，往往是坐在兩三米之外。因此，電視端的信息設(shè)計(jì)有著兩個(gè)顯著的特質(zhì)：為大屏幕而設(shè)計(jì)和為遠(yuǎn)距離而設(shè)計(jì)，有著以下幾個(gè)注意事項(xiàng)：

1. 重視信息的識(shí)別性和簡(jiǎn)潔易懂

文字、圖標(biāo)和按鈕，乃至toast提示，在電視端的識(shí)別性問(wèn)題比手機(jī)和PC端更為凸顯。因?yàn)檫h(yuǎn)距離、大屏幕，加上電視本身的休閑屬性，使得用戶的注意力較為分散，因此，界面中的信息和元素就需要適當(dāng)放大，至少保證用戶能夠在兩三米之外能清晰看到，如圖9所示。

圖9 信息識(shí)別案例

2. 提前露出信息和多露出點(diǎn)信息

在“遙控器輸入”章節(jié)中有提到，提前露出信息能夠在一定程度上減少用戶輸入，并在產(chǎn)品層面吸引用戶進(jìn)入。不過(guò)，和手機(jī)端設(shè)計(jì)類似，還是需要甄別哪些信息需要提前露出、怎么露出以及露出信息后對(duì)產(chǎn)品穩(wěn)定性和性能的影響；這些都需要基于產(chǎn)品特點(diǎn)，并與產(chǎn)品、視覺(jué)和開(kāi)發(fā)共同協(xié)商確定。而“多露出點(diǎn)信息”卻相對(duì)容易理解，主要是告知用戶右邊/下邊“還有一些內(nèi)容，快去看看”，如圖10所示。

圖10 信息露出案例

3. 避免過(guò)多無(wú)模塊信息的展示

相比于手機(jī)端，因屏幕較大，與PC端類似，往往需將屏幕劃分為多個(gè)排列整齊的小屏幕來(lái)進(jìn)行設(shè)計(jì)，即模塊化、區(qū)域化的設(shè)計(jì)信息展現(xiàn)。通過(guò)這種方式，可以使信息布局更為規(guī)整，用戶不容易迷失在繁雜的信息中，如圖11所示。

圖11 信息模塊化案例

四、控件位置

控件的位置問(wèn)題是初期開(kāi)始電視產(chǎn)品設(shè)計(jì)時(shí)非常容易犯的錯(cuò)誤，如圖12所示。左圖中的“添加股票”按鈕，當(dāng)已添加的股票過(guò)多時(shí)，可能會(huì)看不到該按鈕，或需用戶按很多下才能使焦點(diǎn)移動(dòng)到“添加股票”；右圖中的文字瀏覽，完全不知道如何瀏覽，也不知道如何將焦點(diǎn)從文字移動(dòng)到“查看票種”按鈕。這兩個(gè)案例闡述了：按鈕的位置導(dǎo)致按鈕丟失或操作效率較低；電視端文字閱讀也得遵守焦點(diǎn)瀏覽原則，如每行1個(gè)焦點(diǎn)或整篇1個(gè)焦點(diǎn)，若是后者，就得保證可見(jiàn)范圍內(nèi)文字已展示全。因此，在電視大屏中放置交互控件，需充分考慮是否符合電視端的使用方式以及用戶的操作效率。

圖12 控件位置案例

五、焦點(diǎn)狀態(tài)

前文提到過(guò)很多次的“焦點(diǎn)”，它其實(shí)是電視大屏用戶體驗(yàn)的第一要素，而在交互說(shuō)明中最常出現(xiàn)的也是“焦點(diǎn)怎么樣了”。無(wú)論是交互還是視覺(jué)，在初期接觸電視產(chǎn)品設(shè)計(jì)時(shí)，可能都會(huì)因?yàn)椤敖裹c(diǎn)”的設(shè)計(jì)失誤引發(fā)用戶體驗(yàn)問(wèn)題，比如：焦點(diǎn)的移動(dòng)順序不一致（從哪里來(lái)未回到哪里去，焦點(diǎn)在界面中亂跳）使用戶認(rèn)知錯(cuò)亂；焦點(diǎn)的不夠醒目或樣式不統(tǒng)一使用戶無(wú)法找到焦點(diǎn)等，如圖13所示。

圖13 不統(tǒng)一的焦點(diǎn)樣式

電視端焦點(diǎn)也是有著各種不同的狀態(tài)的，如圖14所示，“焦點(diǎn)狀態(tài)”一般采用“描邊、放大、高亮等”方式使其明顯，而“按下?tīng)顟B(tài)”可能不一定有，或者是和其他幾個(gè)狀態(tài)相同。

圖14 焦點(diǎn)狀態(tài)種類

可能需要簡(jiǎn)單講述一下“標(biāo)記狀態(tài)”和“半選中狀態(tài)”：“標(biāo)記狀態(tài)”在PC和手機(jī)端也非常常見(jiàn)，比如告知用戶所在位置在哪里的Tab標(biāo)記；而“半選中狀態(tài)”是“焦點(diǎn)狀態(tài)”的一種情況，即移動(dòng)到某個(gè)焦點(diǎn)后，不進(jìn)行加載或觸發(fā)操作，需按“OK鍵”才觸發(fā)，如圖15所示。這種狀態(tài)在早期電視盒子性能不足、在Tab切換時(shí)經(jīng)常需要使用，因?yàn)槿绻苯忧袚Q焦點(diǎn)時(shí)就加載，可能會(huì)造成卡頓。

圖15 標(biāo)記狀態(tài)和半選中狀態(tài)案例

六、結(jié)語(yǔ)

我總結(jié)和歸納的這些基本知識(shí)和注意事項(xiàng)，雖然它們能夠幫助我們快速了解電視大屏的基本交互知識(shí)，避免一些不必要的坑；但還遠(yuǎn)遠(yuǎn)不夠，更多的是需要在實(shí)際參與項(xiàng)目中快速學(xué)習(xí)、快速應(yīng)用，因此，之后我將會(huì)基于我參與的項(xiàng)目再次進(jìn)行電視大屏的實(shí)戰(zhàn)總結(jié)，歡迎下次再與大家一同交流和成長(zhǎng)。

藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

國(guó)外的logo設(shè)計(jì)

JavaScript 創(chuàng)建動(dòng)態(tài)頁(yè)面。事件是可以被 JavaScript 偵測(cè)到的行為。 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。比如說(shuō)，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時(shí)，就發(fā)生一個(gè)鼠標(biāo)單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個(gè)結(jié)果。主要事件表總結(jié)如下：