<big id="fg4qc"></big>

  • <strike id="fg4qc"></strike><th id="fg4qc"><option id="fg4qc"></option></th>

      <tr id="fg4qc"></tr>

            當前位置:網站首頁 / 建站知識 / 網站設計知識

            讓酷炫的文字交互效果點亮你的網頁

            來源:未知時間:2016-01-07 09:43點擊:

            在網頁設計中,如果網站主頁色彩處理得好,能讓整個網站錦上添花。而一些交互效果的巧妙使用,不僅讓網頁瞬間亮起來,甚至在提升用戶感知度和感官體驗上可以起到無可替代的作用。

            我們這里所說的交互主要是指,用戶通過鼠標的懸停、滑動、單擊、拖動等交互方式來觸發事件,與目標對象產生互動。

            本系列文章關于網頁文字設計,我們就先分享文字的交互效果。

            文字交互過程的場景應該是這樣的:

            一個用戶在瀏覽一個網頁時,注意到某些文字,當他用鼠標懸停、滑過、單擊、拖動(交互行為)與文字(交互對象)互動時,看到文字發生了變化(交互反饋)。

            這些變化可以是字體大小變化、顏色發生改變,也可能是一些動態效果。好的交互效果能引起用戶的好奇心,增加他們瀏覽網頁時長,讓他們對你的網頁印象深刻。

            說到文字顏色的變化,這里分享三個關于網頁文字顏色的小規范:

            > 同一個網站需要定出主文字顏色,特殊情況可以有2種左右的輔助文字顏色。

            > 正文的文字顏色為深灰色,建議選用#333333到#666666之間的顏色,若選用其他文字顏色作為正文主色調時,安全起見可采用明度不大于30%的顏色。

            > 藍色的文字一般會在絕大多數超鏈接位置使用,其他地方應謹慎使用。

            最最重要的一點是,規范可以靈活應用,但一定要考慮網頁的整體配色。

            下圖是常用文字顏色推薦,可做參考:

            接著正式介紹幾個文字交互效果的案例。

            1. 文字顏色變化和下劃線

            鼠標懸停時,文字顏色發生變化和出現下劃線很多時候用于網頁中的超鏈接,雖然大部分網站會將超鏈接文字顏色設置成藍色帶下劃線的樣式(常規、傳統、用戶習慣、易讀性高),但這并不是唯一的樣式。

            超鏈接除了需要在大段文字中脫穎而出,還應該考慮用戶的閱讀體驗。很多網站的超鏈接設計在提升用戶體驗上在不斷優化創新。

            在M&M’s的活動網站中,按鈕中的小圖標本身就有動態效果,很容易吸引人的注意力。

            當鼠標懸停在按鈕文字上時,文字顏色和圖標發生變化,用戶能明確這是一個鏈接。這類效果讓用戶體驗到和網站的互動,同時它還有一種號召力,暗示并鼓勵用戶去點擊嘗試。

            而在蘋果官網中,超鏈接的效果是鼠標懸停時文字出現下劃線。

            雖然沒有特別設置文字顏色,但文字右側的小箭頭有一個引導作用,讓用戶明白這里可以點擊。當我們把鼠標放到文字上時,文字底部則出現一條和文字同顏色的下劃線,強化了鏈接的特征。

            以上兩個案例分別采用了超鏈接的典型特征,即鼠標懸停時文字顏色變化、文字出現下劃線,這樣的形式可以實現與用戶的良好互動。

            2. 出現新信息

            在十年后網站中,這一部分設計展示了各個分類的名稱,當我們將鼠標懸停在某個分類下,交互中會出現新的文字信息,然后文字整體向上移動,向用戶展示了各個分類的熱門程度。

            如下圖:

            當用戶第一眼看到這部分時,版塊內容干凈清晰,他可以直接點擊進入自己感興趣的分類,而當他不知道選擇哪個分類時,可以通過鼠標懸停獲取新信息,以此了解每個分類的熱門程度。

            網站顯得動感,還為用戶提供了一種選擇方式。

            3. 按鈕效果

            AnyForWeb網站頭部“關于我們”的設計為按鈕樣式,原本是紅色線框紅色文字,鼠標懸停時則變為白色文字和紅色按鈕的樣式。

            這樣懸停效果展現了網站上獨特的小細節,用戶不經意發現后,感受到一種趣味交互的體驗。

            4.文字懸停動態效果

            下面是網上幾個典型的文字Hover懸停效果,希望能給設計師一些靈感。

            在實際網站設計中,很多酷炫的交互效果都出自國外網站,歐美設計師注重交互設計和用戶體驗,并在這些領域比國內發展得更早。不過目前國內有些公司也開始關注這一塊,一些新的中文網站開始出現很好的文字交互,成功吸引了很多用戶關注。

            具備好交互的網站一定會越來越受到用戶青睞,也將會成為網頁設計的發展趨勢。

            所以咱們設計師也要趕快行動,通過不斷的學習和嘗試積累經驗,再用一些些適用的小創意, 讓我們設計的網頁Bling~Bling~

            天天爱天天看人人视频_一日本道在线不卡视频_人人澡人人澡人人看_久久超碰国产精品最新