• <bdo id="1ftk3"></bdo>
      <bdo id="1ftk3"></bdo>

      1. 歡迎來到合肥浪訊網絡科技有限公司官網
          咨詢服務熱線:400-099-8848

        瞬間的規劃 II

        發布時間:2019-11-11 文章來源:本站  瀏覽次數:2346

        好的規劃絕不是單純的因為天才的構思或者創意爆發的一瞬間而發生的,只要規劃師在“繼續改進”的迭代方法中才干到達好的效果,你必須經過不斷的“質疑自己”,在不同的規劃種找到缺陷,并尋求 更好的計劃來改進它。Bill Scott在他的《Web界面規劃》里提到了關于富交互規劃的六個準則告知咱們怎么發現并找到處理的方法,我遵循這些規劃準則,經過實例和數據來和咱們一起剖析一些有趣的瞬間,輔導咱們的規劃。

        一、直接操縱準則

        直接操縱準則就像Alan Cooper在《ABOUT FACE 2.0》中陳說的那樣”:“在哪里輸入,就在哪里輸出“。例如修正內容的操作完全能夠不用從頭打開頁面,而直接在當時頁面進行就能夠了。

        flickr是用到即時修正相片信息的網站。這種方法更開門見山,用戶不用切換當時頁面就能完結。他們將更樂意為他們相片改名字,那么也就意味著會有更多與相片有關的元數據被記載下來,方便其他用戶更好的搜索和閱讀。咱們先剖析一下在這個操作的交互瞬間。


        每個交互元素在不同觸發事 件下所表現的呼應狀況。其中橘黃色區域是隱藏在初始狀況后面發生的動作和呈現的元素。

        瞬間的規劃 II(圖二)

        約請修正——默認情況下,標題正常顯現。當鼠標懸停在標題上,標題馬上顯現黃色布景條和一個“click to edit”的提示條呈現,這種約請提示的好處是——告知用戶當時區域是可修正的并引導他們去點擊。

        修正——單擊今后,就當即進入到修正模式,標題原位置呈現了標題表單和”save”“cancel”按鈕,用戶就能非常清楚他們是在修正標題。(這種方法的缺陷就是多出來的按鈕會把相片頂到下一行,造成排版不穩定)

        完結——保存方法有很多種,flickr采用了文本的”saving…“臨時替換標題,一旦保存完結,新標題就會以非修正的款式呈現。

        上述過程中,運用到了一些約請提示用戶完結修正,只滿意了”可操作性“。那么用戶怎樣才干發現這個功用呢?這就涉及到”可拜訪性“問題。上述比如只要在鼠標移上去時才干被用戶發現是可修正性的,那么很可能存在一部分用戶沒有用鼠標移上去而疏忽這些約請。為了讓功用更易被發現,能夠采用在標題邊放”修正“鏈接。單擊該鏈接便可觸發修正。(不過這也會影響到頁面的視覺攪擾問題,如果有過多的功用提示會造成頁面噪點過多,可用率下降。)因此,做規劃是要權衡易讀性和易修正性哪個重要,做出取舍。

        二、保持輕量級

        Digg在早期的時分,用戶想要推一篇文章,需要經過兩步操作。而現在的改進版——只要單擊”digg“馬山就能夠記載一次投票。就因為”單擊,完畢“簡略了一點,帶來了用戶活躍度和網站點擊率的飛速添加,這正是交互輕量級規劃的一大效果。

        怎樣經過簡化交互,完成操作更接近內容,然后保證規劃的輕量級呢?

        1.費茨規律

        費茨規律指的是:移動到方針上的時刻(T)和移動間隔(D)的對數(S)成正比。用公式表示為:

        T = a + b log2 ( D / S + 1 )來核算。其中

        D:鼠標到達方針的間隔
        S:方針的寬度(尺寸)

        咱們能夠簡略的理解為:方針定位越簡略,間隔鼠標當時的位置就應該越近,方針占用空間應該更大。為了簡略,咱們能夠把功用都會集到一塊(如放在菜單欄和工具欄中)??墒沁@樣就違反了費茨規律(找起來會很費力,間隔也會添加)。經過上下文工具把操作放在相關內容鄰近是不錯的方法。[注:上下文工具是桌面右鍵菜單的web版]

        2.實時可見的工具

        digg在每篇文章周圍,有一個推舉的記分卡,下方的”digg it“按鈕要比其他的操作顯得顯著。鼠標懸停的時分”digg it“的按鈕邊框變成黑色杰出顯現,單擊”digg“后,投票結果馬上記載并在記分卡上實時更新。一起”digg“按鈕灰掉不可點,標簽文本也變成灰色”dugg“。

        瞬間的規劃 II(圖三)

        和digg一樣,豆瓣的打分也是網站的中心功用。因此明確的操作(評級)約請非常重要。打分后,用戶能夠隨意更改打分分值,對評價作出刪去和修正。

        瞬間的規劃 II(圖四)

        shutterstock把參加的收藏的圖片總是顯現在頁面底部的遮罩層中,用戶能夠隨時看到并修正自己添加的圖片。

        瞬間的規劃 II(圖五)

        3.保持要害內容可見

        Gmail在頁面加載的時分考慮了用戶慢速銜接的運用情況,減少款式的加載,運用備選計劃保證主要內容可見。

        瞬間的規劃 II(圖六)

        淘寶的listing頁面一次改版,鼠標懸停在寶物圖片上時,不只呈現大圖,一起還在時刻維度上對賣家推薦的商品輪播顯現,用戶相同能夠點擊下方的小圖來挑選查看。不只保證了要害內容可見,一起處理了多信息的展示和交互。

        瞬間的規劃 II(圖七)

        4.只做一件工作

        Linkdin音訊列表中,用戶名承載著兩個交互行為:鼠標點擊后會跳轉到用戶profile頁面,而鼠標懸停0.5秒今后呈現彈出層,顯現該用戶的簡介。如果咱們不做0.5秒的限制,就會呈現用戶在鼠標以上去時馬上顯現彈出層,那么很可能會有用戶認為這個鏈接只具有這一種操作功用,而疏忽了它能夠點擊的功用。所以對一個交互行為只賦予它一種功用,多種功用需要考慮用其它方法去完成。

        瞬間的規劃 II(圖八)

        Amazon用別的一種方法來處理多功用的展示。星星打分的信息包括兩方面:鼠標懸停展示彈出層顯現每顆星的打分人數;鼠標點擊后顯現評價詳情頁面。如果把這兩個信息一起經過點擊星星來完成就會呈現上述類似問題。Amazon則是經過添加一個類似下拉的按鈕來承載鼠標懸停的交互行為,把點擊行為只留給星星。

        瞬間的規劃 II(圖九)

        上一條:淺析網頁顏色運用...

        下一條:圖標規劃作品鱗爪...

      2. <bdo id="1ftk3"></bdo>
          <bdo id="1ftk3"></bdo>

          1. {关键词}