2022-3-4 純純
放眼過(guò)去大量同質(zhì)化或跟風(fēng)的網(wǎng)站風(fēng)格，空有一副美觀的皮囊，卻少了些什么，為何不交互創(chuàng)新一下呢？具有創(chuàng)意的交互必然能使一副黑白的畫(huà)面瞬間點(diǎn)亮色彩。
你可能想有創(chuàng)意的交互能為網(wǎng)頁(yè)帶來(lái)什么？
挺多的，我舉例：一個(gè)連微動(dòng)效都沒(méi)有的靜態(tài)網(wǎng)頁(yè)你進(jìn)去后也就看見(jiàn)的這樣，那么如果這個(gè)網(wǎng)頁(yè)進(jìn)去時(shí)，內(nèi)容會(huì)有入場(chǎng)動(dòng)效，你是不是馬上能感覺(jué)到這個(gè)網(wǎng)站有點(diǎn)兒東西，要抄起鼠標(biāo)探索一番？換言之，好的交互創(chuàng)意甚至能讓你產(chǎn)生心流模式，你通過(guò)鼠標(biāo)到處點(diǎn)擊，頁(yè)面上不斷的給出動(dòng)畫(huà)效果，然后你收獲驚喜，最終促使你進(jìn)行更多的嘗試。
好了，說(shuō)多了，就是希望為更多設(shè)計(jì)師提供設(shè)計(jì)思路或執(zhí)行概念，幫助大家找到更多的創(chuàng)意靈感。
Web 端交互圍繞計(jì)算機(jī)為中心。主要涉及鍵盤鼠標(biāo)兩類設(shè)備的交互，個(gè)別網(wǎng)站的產(chǎn)品可能會(huì)涉及麥克風(fēng)聲音采集或攝像頭應(yīng)用。
1. 鼠標(biāo)允許的交互
現(xiàn)在的鼠標(biāo)可以支持更多功能，但是通常來(lái)講需要嚴(yán)格的考慮兼容問(wèn)題，所以僅以鼠標(biāo)左右鍵滾輪滾動(dòng)以及光標(biāo)映射選取為主；
以上所有交互都可以根據(jù)實(shí)際場(chǎng)景進(jìn)行設(shè)定，不過(guò)鑒于用戶習(xí)慣，一般不會(huì)用到快速的連擊交互以及右鍵的雙擊、長(zhǎng)按或拖拽，這不符合交互手勢(shì)的舒適度或簡(jiǎn)化易用的初衷。
2. 鍵盤交互支持
鍵盤支持大量的按鍵交互，除去一些全局的功能按鍵和組合快捷鍵，在網(wǎng)頁(yè)交互應(yīng)用中常見(jiàn)的還可以分為以下幾種情況；
在應(yīng)用鍵盤按鍵功能的時(shí)候，除去那些作用明確大眾悉知的按鍵功能，其他的按鍵操作應(yīng)該保證界面上有指引有提示。
組合的交互動(dòng)作常配合不能簡(jiǎn)單直接完成的任務(wù)，這里的組合指有兩個(gè)及以上交互動(dòng)作完成的類型，復(fù)雜的交互動(dòng)作盡量少用，且盡可能的為用戶提供操作指引，若非必要，費(fèi)力不討好；
組合動(dòng)作主要分為以上 9 類，鼠標(biāo)拖拽的組合動(dòng)作通常會(huì)細(xì)分來(lái)應(yīng)對(duì)界面場(chǎng)景的應(yīng)用，例如通過(guò)橫向拖拽將一個(gè)豎放的圓柱物體旋轉(zhuǎn)起來(lái)，那么垂直的拖拽必然是沒(méi)辦法轉(zhuǎn)動(dòng)起來(lái)的，而且左右還會(huì)決定拖拽的方向。
簡(jiǎn)單來(lái)講，無(wú)非就是看得見(jiàn)的元素、聽(tīng)得見(jiàn)的元素。聽(tīng)得見(jiàn)的元素?zé)o非就一個(gè)聲音，講深一點(diǎn)，也就涉及一些音效的交互控制。而看得見(jiàn)的元素則會(huì)相對(duì)豐富很多，如果再次細(xì)分的話還可以歸為以下幾種情況；
1. 常見(jiàn)變化形式
位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉(zhuǎn)效果、特效變化
web 端的交互概念即觸發(fā)到呈現(xiàn)的過(guò)程。用戶可以使用交互設(shè)備進(jìn)行事件觸發(fā)或變量，頁(yè)面則將內(nèi)容進(jìn)行對(duì)應(yīng)的呈現(xiàn)。其中交互過(guò)程主要影響的事件由“可交互的元素“、“功能交互“、“轉(zhuǎn)場(chǎng)切換“構(gòu)成。
頁(yè)面內(nèi)容呈現(xiàn)通常分為“默認(rèn)時(shí)“、“選擇時(shí)“、“運(yùn)行時(shí)”三個(gè)時(shí)態(tài)（鼠標(biāo)短暫的點(diǎn)擊時(shí)屬于“選擇時(shí)”，若長(zhǎng)按有內(nèi)容影響則屬于“運(yùn)行時(shí)”），因此在網(wǎng)頁(yè)交互的過(guò)程中，我們需要考慮好這三種完整的狀態(tài)時(shí)呈現(xiàn)形式，另外在考慮補(bǔ)充合適的動(dòng)效進(jìn)行過(guò)濾或信息反饋。歸根到底網(wǎng)頁(yè)的交互概念就是控制內(nèi)容呈現(xiàn)罷了，這是網(wǎng)頁(yè)價(jià)值的本質(zhì)。
web 端內(nèi)容呈現(xiàn)的結(jié)構(gòu)應(yīng)該算是頁(yè)面交互的范疇吧，其實(shí)上網(wǎng)頁(yè)的頁(yè)面并不只是長(zhǎng)頁(yè)面的形式，實(shí)際上會(huì)有更多種結(jié)構(gòu)可用。因?yàn)殡娔X顯示器更大的緣故，web 端結(jié)構(gòu)上比移動(dòng)端更加靈活，同時(shí)根據(jù)產(chǎn)品的性質(zhì)也有需要考慮移動(dòng)端響應(yīng)式的需求，一般來(lái)講這些頁(yè)面結(jié)構(gòu)可以分為以下六類：
網(wǎng)頁(yè)的組成區(qū)塊通常分為五大類型，即導(dǎo)航、面包屑、背景、內(nèi)容呈現(xiàn)、彈出框。菜單導(dǎo)航欄通常分為頂部導(dǎo)航、側(cè)邊導(dǎo)航、底部導(dǎo)航、組合導(dǎo)航四大類，也有個(gè)別是通過(guò)點(diǎn)擊彈出的導(dǎo)航。內(nèi)容布局則更是五花八門了，是板式與技巧的呈現(xiàn)了。
個(gè)別產(chǎn)品本身也是創(chuàng)意的一部分，有一些可能界面交互平平，但是卻有著魔性或引人關(guān)注的產(chǎn)品內(nèi)容。而這里整理了些比較典型的視覺(jué)展現(xiàn)形式和交互創(chuàng)意形式的案例，這些方式通?？梢愿鶕?jù)產(chǎn)品的定位與特色進(jìn)行組合設(shè)計(jì)和開(kāi)發(fā)呈現(xiàn)，讓你的網(wǎng)站更富有創(chuàng)意和較好的視覺(jué)體驗(yàn)；
1. 幾何色塊搭配文案
色塊搭配標(biāo)題文案，簡(jiǎn)約大氣有視覺(jué)沖擊力，再也不用擔(dān)心沒(méi)有圖片或插畫(huà)素材了
2. 精美大圖背景搭配內(nèi)容
采用精美大圖背景搭配文案或交互控件，精美的圖片本身就很搶眼，再搭配標(biāo)題大字，瞬間就使得頁(yè)面有沖擊感有層次，常見(jiàn)于游戲官網(wǎng)或活動(dòng)專題
3. 關(guān)聯(lián)插畫(huà)或圖標(biāo)搭配文案
采用小范圍的插畫(huà)或圖標(biāo)來(lái)表達(dá)服務(wù)或產(chǎn)品優(yōu)勢(shì)，搭配文案說(shuō)明，風(fēng)格統(tǒng)一精致耐看。常見(jiàn)于服務(wù)描述或產(chǎn)品說(shuō)明模塊應(yīng)用
4. 留白大圖搭配文案
將某個(gè)產(chǎn)品或其他元素放大顯示再結(jié)合極簡(jiǎn)的排版說(shuō)明，有較好的視覺(jué)沖擊力和產(chǎn)品凸顯效果，同時(shí)留白保證呼吸感和減少視覺(jué)噪點(diǎn)，使得用戶能夠更加專注產(chǎn)品圖
5. 動(dòng)態(tài)的背景或微動(dòng)效裝飾
應(yīng)用動(dòng)態(tài)背景或微動(dòng)效的元素裝飾，有較好的內(nèi)容吸引力或氛圍渲染力，可以展現(xiàn)更多的產(chǎn)品細(xì)節(jié)或豐富畫(huà)面層次感，不過(guò)也比較考驗(yàn)視頻本身或動(dòng)效裝飾自身質(zhì)量
6. 點(diǎn)線面裝飾與文案排版
應(yīng)用簡(jiǎn)單點(diǎn)線面元素去裝飾界面，再結(jié)合有對(duì)比有版式的文案排版。頁(yè)面簡(jiǎn)潔美觀，適合簡(jiǎn)約干凈少圖的頁(yè)面模塊
7. 柵格化應(yīng)用與板式跳躍率
應(yīng)用柵格化與版式跳躍率，使界面整體充滿平面藝術(shù)，富有節(jié)奏感且不顯凌亂。在日本的網(wǎng)頁(yè)設(shè)計(jì)上有大量應(yīng)用
9. 充滿個(gè)性的視覺(jué)裝扮
采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風(fēng)、手繪插畫(huà)等視覺(jué)風(fēng)格，來(lái)打造符合產(chǎn)品的特殊視覺(jué)效果，為網(wǎng)頁(yè)印象加分，提升品牌感染力
10. 引用 3D 視覺(jué)裝飾
運(yùn)用 3D 視覺(jué)搭建頁(yè)面場(chǎng)景，常見(jiàn)的有 3D 圖標(biāo)、3D 動(dòng)效或 3D 產(chǎn)品大圖等，有較強(qiáng)畫(huà)面立體感和表達(dá)能力，視覺(jué)新穎讓人眼前一亮，也是當(dāng)前的一種視覺(jué)趨勢(shì)效果
11. 產(chǎn)品元素或其他元素來(lái)填充背景
將品牌元素進(jìn)行弱化處理后作為背景墻，凸顯個(gè)性和豐富畫(huà)面，結(jié)合微動(dòng)效可以有進(jìn)一步的效果增強(qiáng)
12. 矩形陳列或卡片陳列
將內(nèi)容模塊用矩形陳列顯示或卡片陳列，Win10 菜單或 WP 系統(tǒng)的手機(jī)桌面有較好體現(xiàn)，特點(diǎn)是干凈利落模塊分明，適合同類模塊較多的場(chǎng)景進(jìn)行排列顯示
13. 極致的簡(jiǎn)約
采用極簡(jiǎn)的方式呈現(xiàn)內(nèi)容核心，可以是一張圖一段字、一段文案排版等，總之就這么簡(jiǎn)單的搞定了
14. 魔幻或神秘感界面呈現(xiàn)
如示例網(wǎng)址一樣，魔幻且神秘，有著迷之吸引力和趣味性，不過(guò)需要慎用，比較惡搞。而適當(dāng)給出一些神秘感，可以使得頁(yè)面內(nèi)容更有吸引力，用戶更愿意去點(diǎn)擊嘗試。
主要是關(guān)于頁(yè)面內(nèi)容元素交互時(shí)的創(chuàng)意形式講解，這里不對(duì)交互動(dòng)效或特效細(xì)節(jié)進(jìn)行過(guò)多說(shuō)明，因?yàn)樵趺慈?dòng)又或者用什么樣的特效去呈現(xiàn)實(shí)在數(shù)不清說(shuō)不完，如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗(yàn)合集地址。
1. 光標(biāo)跟隨動(dòng)畫(huà)
會(huì)使頁(yè)面上的元素根據(jù)光標(biāo)的位置或移動(dòng)產(chǎn)生相應(yīng)變換，增加頁(yè)面的互動(dòng)性與趣味，適用于裝飾或加強(qiáng)背景層次感，在特定的場(chǎng)景也可以使整套控制 UI 往鼠標(biāo)移動(dòng)的方向微微靠近，結(jié)合菲茲定律公式，距離的不斷縮減也能夠加快選中的效率）
2. 鼠標(biāo)懸浮動(dòng)畫(huà)
簡(jiǎn)單易用的鼠標(biāo)懸浮動(dòng)畫(huà)，用于聚焦顯示或 Tooltip 說(shuō)明，常用與內(nèi)容選中狀態(tài)區(qū)分或元素細(xì)節(jié)展示，加上一組好的動(dòng)效創(chuàng)意非常能夠凸顯個(gè)性，使用戶感到驚喜為體驗(yàn)加分
如果是一個(gè)完整動(dòng)畫(huà)緩慢播放完會(huì)更有敘述性
3. 鼠標(biāo)點(diǎn)擊特效
由鼠標(biāo)點(diǎn)擊進(jìn)行觸發(fā)，基本樣式即點(diǎn)擊狀態(tài)顯示，觸發(fā)后的特效可以是圖標(biāo)動(dòng)畫(huà)、光效、音效、界面動(dòng)畫(huà)等，游戲場(chǎng)景中較為常見(jiàn)，點(diǎn)擊后不僅有光效反饋還有音效附和，這是一種觸發(fā)反饋效果。
4. 鼠標(biāo)長(zhǎng)按特效
當(dāng)鼠標(biāo)長(zhǎng)按某個(gè)按鈕時(shí)持續(xù)出現(xiàn)的特殊效果，一般是持續(xù)鼠標(biāo)點(diǎn)擊的特效或維持某個(gè)元素的變化效果，通常對(duì)數(shù)值持續(xù)增減動(dòng)作較為常見(jiàn)，可以代替連續(xù)的點(diǎn)擊，交互更輕松。也或者是需要一定的加載時(shí)間所以用長(zhǎng)按配合
通過(guò)長(zhǎng)按持續(xù)增加細(xì)菌圓點(diǎn)
5. 鼠標(biāo)拖拽特效
通過(guò)鼠標(biāo)點(diǎn)擊長(zhǎng)按某個(gè)元素進(jìn)行移動(dòng)的組合交互，一般用于拖拽移動(dòng)、內(nèi)容繪制、元素連接等。應(yīng)用場(chǎng)景廣，互動(dòng)性較高，能為用戶帶來(lái)更多的參與感和趣味性，甚至制造小驚喜
示例內(nèi)容：阿里內(nèi)測(cè)的 Real 3D
6. 鼠標(biāo)滾輪巧妙的聯(lián)動(dòng)效果
主要用于頁(yè)面某個(gè)值的控制或頁(yè)面滾動(dòng)，在頁(yè)面滾動(dòng)的時(shí)候可以配合控制元素變化來(lái)實(shí)現(xiàn)更具創(chuàng)意的展現(xiàn)效果，通常元素透明度、位置、大小、序列圖都可以控制
國(guó)內(nèi)官網(wǎng)
7. 鼠標(biāo)選中自動(dòng)展開(kāi)
鼠標(biāo)經(jīng)過(guò)選項(xiàng)時(shí)自動(dòng)展開(kāi)選項(xiàng)并聚焦，可以省去鼠標(biāo)點(diǎn)開(kāi)的動(dòng)作，但不適用于選項(xiàng)內(nèi)容較多且內(nèi)容密集的場(chǎng)景
8. 按鍵與鼠標(biāo)配合觸發(fā)
通過(guò)指定按鍵和鼠標(biāo)配合交互進(jìn)行觸發(fā)，適用于同界面的復(fù)雜交互場(chǎng)景，且存在某些變量需要鼠標(biāo)控制。如果你的網(wǎng)頁(yè)內(nèi)交互豐富且包含變量元素，不妨試試看
9. 模塊或分頁(yè)加載動(dòng)效
在頁(yè)面滑動(dòng)或分頁(yè)信息加載時(shí)，界面構(gòu)成元素有序的緩入進(jìn)場(chǎng)。采用流暢的動(dòng)效演示數(shù)據(jù)加載的過(guò)程，緩解數(shù)據(jù)加載渲染壓力的同時(shí)，使得用戶可以更加從容不迫地瀏覽信息，讓界面呈現(xiàn)更加精致優(yōu)雅
10. 趣味轉(zhuǎn)場(chǎng)或加載等候
應(yīng)用轉(zhuǎn)場(chǎng)效果與 Loading 動(dòng)畫(huà)，運(yùn)用某個(gè)元素變大覆蓋或頁(yè)面移動(dòng)交替轉(zhuǎn)場(chǎng)，而非生硬的直接替換，使得頁(yè)面切換更有趣味和層級(jí)關(guān)系體現(xiàn)。再對(duì)加載較慢的內(nèi)容補(bǔ)充 Loading 動(dòng)畫(huà)，緩解用戶焦慮的同時(shí)還能延展品牌信息
11. 大圖或多圖輪播應(yīng)用
精美的圖片總是想要放大看，看了還想看。運(yùn)用超大的輪播圖展示與沉浸式功能布局，滿足用戶操作與大圖賞析
12. 內(nèi)容穿插滾動(dòng)
運(yùn)用特殊的圖層順序結(jié)構(gòu)，在頁(yè)面滾動(dòng)查看時(shí)，形成奇妙的元素穿梭視感。通常會(huì)穿梭替換背景或讓元素接力，這樣相比靜態(tài)寫(xiě)實(shí)的頁(yè)面滾動(dòng)時(shí)會(huì)更有層次感
13. 內(nèi)容自動(dòng)生成
輸入關(guān)鍵內(nèi)容后，頁(yè)面自動(dòng)生成結(jié)果進(jìn)行呈現(xiàn)，整個(gè)過(guò)程可以是緩慢有序的，適用于降壓或畫(huà)面創(chuàng)意生成的產(chǎn)品，可以讓用戶感受整個(gè)過(guò)程與細(xì)節(jié)變化
14. 游戲互動(dòng)模式
將產(chǎn)品內(nèi)容以游戲的形式或交互呈現(xiàn)，讓內(nèi)容充滿趣味和互動(dòng)性，使得用戶在參與游戲互動(dòng)的過(guò)程中打破了常規(guī)的閱讀體驗(yàn)
15. 三維或全景空間
建立一個(gè)三維或者全景空間進(jìn)行查看或操作，再賦予操作按鈕或說(shuō)明，實(shí)現(xiàn) 3D 場(chǎng)景的交互與視覺(jué)效果，常用與地圖全景查看或 3D 游戲應(yīng)用，可以巧妙的結(jié)合產(chǎn)品 3D 模型，打造非凡的互動(dòng)體驗(yàn)
16. 一鏡到底的視角呈現(xiàn)
打造一個(gè)非平面的視覺(jué)場(chǎng)景。用鼠標(biāo)點(diǎn)擊或滾輪聯(lián)動(dòng)交互利用分層的元素變化，營(yíng)造出由近到遠(yuǎn)或由上至下的一鏡到底的視角穿梭體驗(yàn)。界面場(chǎng)景切換更加自然，還有超強(qiáng)的空間感與趣味性，讓人難以忘懷如臨其境。
17. 按鍵交互效果
將某些功能或任務(wù)引用按鍵進(jìn)行交互或觸發(fā)。常使用字母、數(shù)字、空格、方位鍵，界面需要有提示對(duì)用戶進(jìn)行指導(dǎo)。
18. 個(gè)性的模塊展現(xiàn)方式
常見(jiàn)的有彈窗、抽屜、卡片展開(kāi)、轉(zhuǎn)盤等，通過(guò)個(gè)性輕松的顯示結(jié)構(gòu)與交互方式也能讓人眼前一亮。
19. 可交互的顏色或圖形
對(duì)一些顏色或形狀元素提供切換或 DIY 的空間，允許用戶進(jìn)行意料之外的交互或配置能力，提升網(wǎng)頁(yè)趣味性或用戶個(gè)性化需求滿足。
20. 音視頻媒體控制
圍繞產(chǎn)品介紹的媒體內(nèi)容，常見(jiàn)有視頻或音頻且支持基本交互控制，結(jié)合場(chǎng)景需求可以豐富交互的形式或更多媒體控制功能，例如長(zhǎng)按快進(jìn)、倒退、剪輯、混音等，常用于娛樂(lè)互動(dòng)場(chǎng)景或音視頻類產(chǎn)品。
21. 內(nèi)容或窗口抖動(dòng)
通過(guò)抖動(dòng)進(jìn)行報(bào)錯(cuò)或反饋，常見(jiàn)為密碼輸入錯(cuò)誤時(shí)或游戲中受到傷害的場(chǎng)景，可伴隨音效提示一起。使用場(chǎng)景不廣泛，但是也可以進(jìn)行創(chuàng)意應(yīng)用，例如抖掉灰塵小游戲，長(zhǎng)按元素抖動(dòng)干凈為止。
22. 打造儀式感
結(jié)合現(xiàn)實(shí)場(chǎng)景中的交互方式，打造相似的線上場(chǎng)景幫助用戶共情帶入，再配合交互和動(dòng)效完成類似的動(dòng)作，為用戶帶來(lái)儀式感和共情效果。
23. 有聲交互
通過(guò)麥克風(fēng)采集聲音來(lái)影響交互，是一種聲音的交互，如果網(wǎng)站支持，甚至可以語(yǔ)音交互，是一種少見(jiàn)的網(wǎng)頁(yè)交互形式，并非傳統(tǒng)的音視頻控制而已。
24. 鏡頭交互
通過(guò)攝像頭授權(quán)獲取鏡頭畫(huà)面進(jìn)行交互，通常是一些鏡頭濾鏡效果或者增強(qiáng)現(xiàn)實(shí)技術(shù)結(jié)合做交互創(chuàng)意，網(wǎng)頁(yè)上少見(jiàn)新穎。
找對(duì)方法去創(chuàng)新很重要！在實(shí)際工作中，我們不僅要衡量界面設(shè)計(jì)與交互效果，同時(shí)還要兼顧開(kāi)發(fā)資源、實(shí)現(xiàn)難度以及產(chǎn)品架構(gòu)本身考慮。對(duì)此我們也需要了解一下開(kāi)發(fā)實(shí)現(xiàn)的概念，之后再研究如何進(jìn)行創(chuàng)新設(shè)計(jì)。
在進(jìn)行創(chuàng)意設(shè)計(jì)時(shí)不考慮開(kāi)發(fā)，那不是自嗨就是對(duì)開(kāi)發(fā)耍流氓。靜態(tài)界面開(kāi)發(fā)或簡(jiǎn)易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動(dòng)、重力等效果)、3D 交互效果相對(duì)會(huì)復(fù)雜許多。大多的動(dòng)效不能依賴 GIF 或 Lottie 進(jìn)行解決，這對(duì)交互控制或性能優(yōu)化都是挑戰(zhàn)，而代碼能夠更好的保障這倆點(diǎn)，所以大量的交互動(dòng)效還是需要開(kāi)發(fā)者支持，而代碼實(shí)現(xiàn)顯然會(huì)比設(shè)計(jì)師產(chǎn)出復(fù)雜。
那么如何解決呢？
CSS 進(jìn)行實(shí)現(xiàn)，部分動(dòng)畫(huà)元素可以由設(shè)計(jì)師通過(guò)第三方軟件或在線生成 CSS、Svga、lottie 文件（相對(duì)下 lottie 更消耗性能，在線生成 icon 動(dòng)畫(huà)代碼： https://loading.io/ ，在線 Lottie 模版搭配使用： https://design.alipay.com/emotion ，自主繪制導(dǎo)出 lottie： http://airbnb.io/lottie/ ，Svga 在線創(chuàng)造： https://www.svgator.com/ ，2D 動(dòng)畫(huà)制作： http://zh.esotericsoftware.com/ ）。而大部分的特殊物理效果或特殊動(dòng)效，其實(shí)會(huì)有可用的第三方庫(kù)或代碼資源來(lái)解決，首先就是保證你所設(shè)計(jì)出來(lái)的動(dòng)效是可行的，過(guò)于逆天可能還是有難度，剩下的便是提供動(dòng)效關(guān)鍵詞方便開(kāi)發(fā)查找相關(guān)資源，或者你給出參考來(lái)源。常見(jiàn)的代碼動(dòng)效素材網(wǎng)有： https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等（歡迎補(bǔ)充哈，別藏著掖著）。對(duì)于 3D 效果的前端開(kāi)發(fā)呢，暫推薦新開(kāi)源的 Oasis 引擎或 Three js 這些來(lái)實(shí)現(xiàn)，當(dāng)然其他引擎也沒(méi)問(wèn)題。2. 網(wǎng)頁(yè)創(chuàng)新設(shè)計(jì)的策略考慮
考慮到創(chuàng)新開(kāi)發(fā)的背景情況不一致，這里我提供了一些創(chuàng)新研發(fā)的策略提供參考：
傳統(tǒng)改版：
1.明確改版目的，挖掘價(jià)值點(diǎn)
會(huì)議說(shuō)明，清楚改版需求的背景與痛點(diǎn)，挖掘價(jià)值找到設(shè)計(jì)發(fā)力點(diǎn)
制定改版目標(biāo)，明確分工計(jì)劃，同步項(xiàng)目情況
2. 構(gòu)建原型框架，評(píng)審優(yōu)化
設(shè)計(jì)新版架構(gòu)，確認(rèn)范圍層細(xì)節(jié)（功能型：功能規(guī)格支持。信息型：內(nèi)容需求），完善流程與信息框架，然后拉攏項(xiàng)目相關(guān)人員進(jìn)行評(píng)審優(yōu)化，直到新版框架大體定型后，再進(jìn)行視覺(jué)層輸出
3. 明確產(chǎn)品定位，建立設(shè)計(jì)語(yǔ)言
要保障產(chǎn)品氣質(zhì)與視覺(jué)風(fēng)格的契合，即一個(gè)資訊網(wǎng)站肯定不適合采用電商視覺(jué)進(jìn)行輸出。然后根據(jù)內(nèi)容占比，考慮呈現(xiàn)的布局方式，即不同模塊中的視頻、圖片、文字比例情況。然后你可以結(jié)合上文的視覺(jué)層創(chuàng)意形式進(jìn)行套用，當(dāng)主要的靜態(tài)視覺(jué)設(shè)計(jì)完成后即可進(jìn)入評(píng)審階段
4. 高保真評(píng)審，挖掘交互創(chuàng)新點(diǎn)
對(duì)網(wǎng)頁(yè)高保真進(jìn)行評(píng)審，確認(rèn)頁(yè)面信息框架或界面設(shè)計(jì)可行。然后對(duì)交互創(chuàng)新方案探討，結(jié)合網(wǎng)頁(yè)的板式設(shè)計(jì)，提出交互創(chuàng)新的細(xì)節(jié)，與開(kāi)發(fā)者同步，確保實(shí)現(xiàn)的可行性與項(xiàng)目工時(shí)可控，同時(shí)披露交互細(xì)節(jié)幫助開(kāi)發(fā)者進(jìn)行調(diào)研或準(zhǔn)備
5. 交互創(chuàng)新對(duì)齊開(kāi)發(fā)，進(jìn)入研發(fā)階段
準(zhǔn)備提供交互的細(xì)節(jié) Demo 或參考內(nèi)容，在基礎(chǔ)內(nèi)容開(kāi)發(fā)完成后或開(kāi)發(fā)者認(rèn)為適合介入的時(shí)機(jī)，進(jìn)行交互創(chuàng)新內(nèi)容的對(duì)齊，使創(chuàng)新方案在最小可行的基礎(chǔ)上進(jìn)行開(kāi)發(fā)實(shí)現(xiàn)。之后建議設(shè)計(jì)同學(xué)耐心的陪同開(kāi)發(fā)小哥進(jìn)行還原，確保效果
6. 測(cè)試驗(yàn)收，預(yù)發(fā)上線
最后進(jìn)行成果驗(yàn)收，確?；镜膬?nèi)容是否符合標(biāo)準(zhǔn)，再根據(jù)工時(shí)情況或上線計(jì)劃等，考慮交互創(chuàng)新部分的細(xì)節(jié)還原調(diào)試，適公司實(shí)際情況可以考慮再迭代一版。之后根據(jù)產(chǎn)品情況自行考慮是否 A/B 測(cè)試、灰度上線等，上線后就是線上數(shù)據(jù)跟進(jìn)或用戶調(diào)研了，希望你的新版本收獲一片叫好 哈哈
敏捷開(kāi)發(fā)：
對(duì)于想要敏捷實(shí)現(xiàn)目標(biāo)的話，可以采用谷歌沖刺法（Google Sprint)，當(dāng)前基本分為六個(gè)階段進(jìn)行，分析理解階段、定義階段、發(fā)散思考階段、決策階段、原型產(chǎn)出階段、測(cè)試驗(yàn)收階段。這里我結(jié)合交互創(chuàng)新的方法，對(duì)多個(gè)階段進(jìn)行了補(bǔ)充，內(nèi)容如下：
1. Understand 理解
明確建站目的、需求背景、梳理業(yè)務(wù)或用戶需求。通過(guò)用戶研究或競(jìng)品分析等手段，更好的理解產(chǎn)品、行業(yè)現(xiàn)狀以及痛點(diǎn)機(jī)會(huì)，也為后面階段提供可靠的依據(jù)或支撐
2. Define 定義
基于對(duì)此次建站需求與背景深度理解，定義產(chǎn)品設(shè)計(jì)目標(biāo)，挖掘價(jià)值點(diǎn)
3. Diverge 發(fā)散
讓參與者們集思廣益，發(fā)散思考，將不同的點(diǎn)子記錄下來(lái)，最好圖文并茂的畫(huà)一下，然后形成自己的方案。在這個(gè)過(guò)程中不必共處一室，獨(dú)立進(jìn)行即可，這樣可以避免被帶偏或擾亂
4. Decide 決策
方案決策環(huán)節(jié)，產(chǎn)品經(jīng)理、設(shè)計(jì)師、開(kāi)發(fā)小哥等將各自的方案進(jìn)行展示說(shuō)明，這個(gè)過(guò)程中不要急著評(píng)價(jià)對(duì)方，只要投票選出最佳方案即可，這是一個(gè)方案的根基，之后再進(jìn)行優(yōu)化和細(xì)節(jié)完善
5. Prototype 原型
建議先將方案框架進(jìn)行原型繪制或 demo 產(chǎn)出，然后經(jīng)過(guò)一輪初步測(cè)試評(píng)審后可以再次優(yōu)化復(fù)盤。在原型繪制的過(guò)程中，主要是確認(rèn)流程與信息框架，不必著急視覺(jué)層的問(wèn)題。若準(zhǔn)備進(jìn)入視覺(jué)設(shè)計(jì)，則可以帶入這幾個(gè)問(wèn)題進(jìn)行思考；
6.Validate 驗(yàn)證
首先通過(guò)內(nèi)部自測(cè)優(yōu)化，再根據(jù)產(chǎn)品類型考慮是否找利益相關(guān)者進(jìn)行可用性測(cè)試驗(yàn)證，或者找專家做顧問(wèn)。之后再進(jìn)行下一步的優(yōu)化完善即可
也許講了這么多，你還是不知道前面諸多的創(chuàng)意方式怎么用，沒(méi)關(guān)系，這里我進(jìn)行了簡(jiǎn)單的整理對(duì)標(biāo)，希望你看完還有救！
網(wǎng)站本身即視為一個(gè)產(chǎn)品，一個(gè)產(chǎn)品的風(fēng)格定向一定是由產(chǎn)品本身屬性或用戶屬性影響，了解產(chǎn)品定位或目標(biāo)用戶也是重要的環(huán)節(jié)，這些環(huán)節(jié)可以制定更符合產(chǎn)品或用戶的信息框架或視覺(jué)表現(xiàn)。通常我們可以將網(wǎng)站類型分為企業(yè)官網(wǎng)、品牌官網(wǎng)、營(yíng)銷官網(wǎng)、門戶網(wǎng)站、論壇相關(guān)、綜合網(wǎng)站六大類，這里簡(jiǎn)單講一下這些網(wǎng)站定位與視覺(jué)特征；
通常一個(gè)網(wǎng)頁(yè)怎么設(shè)計(jì)版式、如何調(diào)整布局結(jié)構(gòu)、調(diào)整基礎(chǔ)交互，都是需要參考原型的信息框架。信息框架中的元素情況會(huì)直接影響視覺(jué)輸入和基本交互。如信息框架中有很多圖，那么設(shè)計(jì)時(shí)就需要考慮是平鋪直敘還是輪播顯示。
信息框架設(shè)計(jì)學(xué)習(xí)：《Web 信息框架》
那么關(guān)于不同的信息架構(gòu)有什么好的布局方法嗎？這一點(diǎn)通過(guò)內(nèi)容的搭配形式，整理了幾種方式供參考：
文の處理：
通常一個(gè)純文本的界面是很難設(shè)計(jì)的，因?yàn)檫^(guò)于單調(diào)，對(duì)此可采用
圖の處理：
純圖片的形式不多見(jiàn)，但是不能否定，一般可能是圖本身有一定的信息傳達(dá)，或者是圖片瀏覽類型的服務(wù)
圖文の處理：
少量圖文配套是比較好處理的，手法也比較多，根據(jù)配套數(shù)量情況還可以調(diào)換位置形成錯(cuò)位區(qū)分模塊
視頻の處理：
視頻的處理分為自動(dòng)跟手動(dòng)控制，自動(dòng)即作為背景自動(dòng)播放，可進(jìn)行簡(jiǎn)單的切換，手動(dòng)則要注意相關(guān)按鈕布局和顯示遮擋問(wèn)題
圖文視頻の混合：
通常圖文視頻混合的情況很少見(jiàn)，視覺(jué)焦點(diǎn)不好控制，其中視頻做背景是最好處理的，但內(nèi)容信息不易過(guò)多
三維の處理：
因?yàn)槭侨S的場(chǎng)景，所以需要考慮到三維場(chǎng)景下的視角形式與操作方式
按鈕の處理：
按鈕是網(wǎng)頁(yè)中最常見(jiàn)的交互控件，是頁(yè)面扭轉(zhuǎn)或功能啟用的基礎(chǔ)
控件の處理：
控件組適用于復(fù)雜場(chǎng)景的任務(wù)交互，通常由多個(gè)按鈕或控件單元組成，特點(diǎn)就是控件單元多模塊占比大
結(jié)合信息框架對(duì)不同元素類型進(jìn)行視覺(jué)設(shè)計(jì)調(diào)整后，再對(duì)頁(yè)面內(nèi)容的基本交互進(jìn)行考慮，例如輪播、切換、彈出、展開(kāi)收起、轉(zhuǎn)場(chǎng)等。之后才是更加細(xì)膩的交互創(chuàng)意思考。
基本交互發(fā)力點(diǎn)
鼠標(biāo)經(jīng)過(guò)反饋：常見(jiàn)且重要的交互方式，通過(guò)鼠標(biāo)經(jīng)過(guò)時(shí)反饋選中狀態(tài)或提示相關(guān)信息
按鈕點(diǎn)擊反饋：在鼠標(biāo)點(diǎn)擊后，按鈕或控件的顏色形狀變換效果，用于反饋點(diǎn)擊成功，實(shí)現(xiàn)眼手體驗(yàn)一致
按鈕長(zhǎng)按效果：長(zhǎng)按狀態(tài)的動(dòng)效示意，通過(guò)對(duì)長(zhǎng)按目標(biāo)加動(dòng)畫(huà)響應(yīng)進(jìn)度或持續(xù)的狀態(tài)，而非單純的變色或樣式切換
完善 Loading 動(dòng)畫(huà)：如點(diǎn)擊上傳下載更新等，出現(xiàn)對(duì)應(yīng)進(jìn)度條或 loading 動(dòng)畫(huà)幫助用戶完善體感
內(nèi)容入出場(chǎng)動(dòng)效：頁(yè)面切換加載或滑動(dòng)頁(yè)面后，內(nèi)容采取動(dòng)效有序的進(jìn)入場(chǎng)景定格，而非生硬的靜態(tài)切換
多內(nèi)容輪播應(yīng)用：對(duì) Banner 或其他多個(gè)內(nèi)容展現(xiàn)，進(jìn)行輪播交互完善和時(shí)間細(xì)節(jié)控制
錦上添花交互發(fā)力點(diǎn)
按鈕切換動(dòng)畫(huà)：通過(guò) icon 的路徑動(dòng)畫(huà)表達(dá)按鈕切換，而非直接的圖標(biāo)對(duì)換，更具個(gè)性和視覺(jué)觀賞性
鼠標(biāo)跟蹤動(dòng)畫(huà)：可以適當(dāng)?shù)淖鲆恍┦髽?biāo)跟蹤事件，讓一些背景或界面元素跟隨鼠標(biāo)律動(dòng)起來(lái)，增強(qiáng)互動(dòng)
特殊滾輪聯(lián)動(dòng)效果：通過(guò)鼠標(biāo)滾動(dòng)聯(lián)動(dòng)其他元素進(jìn)行交互變化，來(lái)呈現(xiàn)更有創(chuàng)意的場(chǎng)景切換或內(nèi)容展示
內(nèi)容穿插滾動(dòng)：將內(nèi)容分層控制，頁(yè)面滾動(dòng)時(shí)將元素固定或交替顯示，產(chǎn)生穿梭感提升界面層次
響應(yīng)式展開(kāi)收起：主要用于二級(jí)或下級(jí)內(nèi)容的自動(dòng)展開(kāi)，由鼠標(biāo)經(jīng)過(guò)自動(dòng)展開(kāi)并聚焦，減少用戶操作
結(jié)合音視頻媒體控制：在頁(yè)面中植入音視頻內(nèi)容通過(guò)按鍵或鼠標(biāo)進(jìn)行交互或切換，打造互動(dòng)性更高的媒體傳達(dá)
趣味轉(zhuǎn)場(chǎng)或頁(yè)面加載：對(duì)頁(yè)面轉(zhuǎn)場(chǎng)或加載深度優(yōu)化。采取更有創(chuàng)意的方式或動(dòng)畫(huà)來(lái)過(guò)渡，讓視覺(jué)體驗(yàn)提升億點(diǎn)點(diǎn)
內(nèi)容或窗口抖動(dòng)報(bào)錯(cuò)：合理采用抖動(dòng)效果進(jìn)行報(bào)錯(cuò)反饋或特殊場(chǎng)景應(yīng)用，使呆板提示更靈動(dòng)
可 DIY 的顏色或圖形：提供主題或模塊的 DIY 空間，滿足用戶編輯符合自己喜好的視覺(jué)效果
結(jié)合產(chǎn)品的場(chǎng)景創(chuàng)意
打造個(gè)性的模塊呈現(xiàn)方式：結(jié)合產(chǎn)品的應(yīng)用場(chǎng)景打造有個(gè)性的呈現(xiàn)方式
打造游戲互動(dòng)的呈現(xiàn)：將有劇情有故事的產(chǎn)品或內(nèi)容游戲化，可以讓用戶趣味互動(dòng)更加深刻
打造一鏡到底的轉(zhuǎn)場(chǎng)：結(jié)合鼠標(biāo)滾輪聯(lián)動(dòng)做鏡頭創(chuàng)意，突出產(chǎn)品細(xì)節(jié)或內(nèi)容呈現(xiàn)
打造三維或全景場(chǎng)景：根據(jù)產(chǎn)品屬性考慮用三維的場(chǎng)景來(lái)增強(qiáng)互動(dòng)與突出產(chǎn)品
打造儀式感交互：利用視覺(jué)和交互變化來(lái)制作符合產(chǎn)品的應(yīng)用效果，實(shí)現(xiàn)儀式感線上體驗(yàn)
有聲交互：比較少見(jiàn)，視產(chǎn)品情況應(yīng)用，可以使聲音產(chǎn)生互動(dòng)或視覺(jué)影響
鏡頭交互：適合有鏡頭針對(duì)性應(yīng)用的產(chǎn)品采用，需要授權(quán)，要做好隱私說(shuō)明
補(bǔ)充按鈕交互觸發(fā)：在場(chǎng)景更為復(fù)雜交互需求更多后，進(jìn)行的常規(guī)解決方法
補(bǔ)充按鍵與鼠標(biāo)配合交互：適合按鍵觸發(fā)且需要鼠標(biāo)控制變量的復(fù)雜交互
文章來(lái)源：優(yōu)設(shè) 作者：泡泡bing
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com