歡迎來(lái)到合肥浪訊網(wǎng)絡(luò)科技有限公司官網(wǎng)
  咨詢服務(wù)熱線:400-099-8848

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧

發(fā)布時(shí)間:2019-11-09 文章來(lái)源:本站  瀏覽次數(shù):2828

在網(wǎng)站或軟件的策劃和規(guī)劃過(guò)程中,咱們常常聽到這樣的評(píng)論:“這個(gè)功用規(guī)劃得太重了”又或“咱們期望可以處理得輕一些”。本文首要從實(shí)踐和總結(jié)的視點(diǎn)出發(fā),提出了讓規(guī)劃變得更輕的6個(gè)技巧。

何為輕規(guī)劃:

在開端之前先需要明確下何為輕規(guī)劃。這里并不想給輕規(guī)劃下一個(gè)專業(yè)的定義,只是概括了咱們對(duì)輕規(guī)劃所應(yīng)具有的特性的理解。

  • 具有活絡(luò)的可交互元素:頁(yè)面上的鏈接、文本框、按鈕等可交互元素能活絡(luò)地呼應(yīng)操作并即時(shí)反應(yīng)。
  • 簡(jiǎn)便的流程和提示,不打斷用戶的當(dāng)前使命:一項(xiàng)使命盡量用少而清楚的過(guò)程去完結(jié),提示和暫時(shí)使命盡量不中斷用戶主使命,不要讓用戶做不必要的承認(rèn)和操作。
  • 不攪擾用戶的注意力:用戶是來(lái)運(yùn)用產(chǎn)品和服務(wù)的,而不是來(lái)賞識(shí)精美的規(guī)劃,假如運(yùn)用過(guò)程中會(huì)因?yàn)橐?guī)劃元素分散注意力那么可能是規(guī)劃太重了。試著少用些無(wú)用的裝修和細(xì)節(jié)。

輕規(guī)劃的6個(gè)技巧:

1. 活絡(luò)的logo呼應(yīng)區(qū)

點(diǎn)擊網(wǎng)站的logo一般能將咱們帶回到主頁(yè)。從這個(gè)視點(diǎn)看,Logo不只起著品牌標(biāo)識(shí)的作用,還承擔(dān)了重要的導(dǎo)航功用。就連一般的鏈接當(dāng)在鼠標(biāo)劃過(guò)時(shí)都有下劃線或者變色提示,那么logo作為一個(gè)更為重要的可交互元素,是否也應(yīng)該在鼠標(biāo)劃過(guò)時(shí)供給適當(dāng)?shù)姆磻?yīng)呢?

下面列舉了幾個(gè)logo區(qū)活絡(luò)呼應(yīng)鼠標(biāo)例子,在運(yùn)用過(guò)程中發(fā)現(xiàn),小小的變化不只提升了可用性,還讓網(wǎng)站顯得活絡(luò)而有生氣。

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖二)

2. 活絡(luò)的可交互元素

導(dǎo)航對(duì)于網(wǎng)站的重要性不言而喻,導(dǎo)航元素要即時(shí)呼應(yīng)鼠標(biāo)操作。

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖三)

重要的操作和引導(dǎo)按鈕應(yīng)該規(guī)劃得愈加細(xì)致些,包含按鈕的三態(tài)(常態(tài),hover,active)乃至四態(tài)(添加一個(gè)禁用態(tài))。這么做也是為了使重要的可交互元素對(duì)不同的操作及時(shí)給出反應(yīng),使其顯得活絡(luò)高效。

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖四)

文本框的狀態(tài)也是一個(gè)容易被疏忽的細(xì)節(jié),首要是獲取焦點(diǎn)后無(wú)提示或者提示不行顯著。

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖五)

另外對(duì)于一些呼應(yīng)時(shí)刻稍長(zhǎng)的操作,應(yīng)該給出進(jìn)展反應(yīng)。似乎是顯而易見的道理,但是規(guī)劃中往往也容易忽視。

3. 清楚且溫文的提示

提示一般都是供給輔助性信息的,既然是輔助性的,就不宜喧賓奪主過(guò)分強(qiáng)化。除非必要,也最好不要給用戶帶來(lái)額外的操作(比如需要用戶主動(dòng)關(guān)閉,承認(rèn)等)。提示的內(nèi)容也是為了帶來(lái)協(xié)助或者供給反應(yīng),因而要言不煩最重要。

twitter中更換個(gè)性化主題時(shí)的提示,從頁(yè)面頂部柔軟出現(xiàn),停留片刻后自動(dòng)消失。

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖六)

meme中的follow提示,在操作處出現(xiàn)。

輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖七)

    4. 躲藏或弱化不常用的操作

    不常用的操作可以弱化,或者躲藏起來(lái),當(dāng)鼠標(biāo)經(jīng)過(guò)的時(shí)分再出現(xiàn)。這個(gè)是基于上文說(shuō)到的不攪擾用戶注意力視點(diǎn)出發(fā)的。

    Twitter中將每條微博條目的操作躲藏了起來(lái),減小了對(duì)閱覽的攪擾。而且在鼠標(biāo)經(jīng)過(guò)條目呼應(yīng)區(qū)和操作時(shí),都有相應(yīng)的變化以作為反應(yīng)。

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖八)

    flickr中針對(duì)相片的操作也運(yùn)用淡灰色,盡可能弱化和減少對(duì)相片瀏覽的攪擾。

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖九)

    5. 引導(dǎo)和強(qiáng)化引薦操作

    強(qiáng)而清楚的引導(dǎo)是十分必要的,研究標(biāo)明用戶在瀏覽頁(yè)面的時(shí)分是跳躍性、非線性的,用戶并不喜愛在諸多的操作中選擇和尋找最佳選項(xiàng)。所以清楚的引導(dǎo)就顯得愈加重要了。重要和常用操作還可以特異處理,以便于尋找和點(diǎn)擊。

    大而易用的表單和注冊(cè)按鈕

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖十)

    箭頭和赤色的按鈕一同供給了清楚的視覺途徑指引。

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖十一)

    常用操作的特異處理。某些瀏覽器的撤退操作也有類似處理。

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖十二)

    6. 簡(jiǎn)便處理暫時(shí)使命

    假如在看一部精彩電影的時(shí)分想喝水了,是期望走到廚房間倒水呢還是期望手邊就有一個(gè)杯子和水壺?顯然人們都不太樂意中斷主使命和注意力去處理暫時(shí)使命,頁(yè)面規(guī)劃也是如此,能在當(dāng)前頁(yè)面完結(jié)果盡量在當(dāng)前頁(yè)面完結(jié)。模態(tài)窗口、跳轉(zhuǎn)頁(yè)面、付出層等都不是讓用戶覺得舒服的做法。除非的確必要,少運(yùn)用這樣的做法。

    flickr中對(duì)相片名字的即時(shí)修改,當(dāng)頁(yè)完結(jié),十分輕盈。

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖十三)

    Delicious中對(duì)保藏條目的刪去承認(rèn),同樣在當(dāng)頁(yè)完結(jié),輕盈且很好地降低了騷擾。

    輕規(guī)劃,讓網(wǎng)站活絡(luò)簡(jiǎn)便的6個(gè)技巧(圖十四)

    小結(jié):

    本文從可用性視點(diǎn)提出了輕規(guī)劃的幾個(gè)技巧:

    1. 活絡(luò)的logo呼應(yīng)區(qū);
    2. 活絡(luò)的可交互元素;
    3. 清楚且溫文的提示;
    4. 躲藏或弱化不常用的操作;
    5. 引導(dǎo)和強(qiáng)化引薦操作;
    6. 簡(jiǎn)便處理暫時(shí)使命

    上一條:圖標(biāo)規(guī)劃作品鱗爪...

    下一條:音樂與規(guī)劃——了解色彩運(yùn)...