網(wǎng)站建設(shè)中互動按鈕起到的大小作用

當(dāng)建設(shè)一個網(wǎng)站完成了核心需求后，我們就可以慢慢準(zhǔn)備開始看細(xì)節(jié)了。

您可以談?wù)摦a(chǎn)品幾乎每個級別的細(xì)節(jié)：表面上的內(nèi)容和表面上的內(nèi)容。表面上的細(xì)節(jié)很簡單，只要花時間去做，試一試，犯錯，改正?？床灰姷募?xì)節(jié)，比如產(chǎn)品定位、用戶體驗等，往往依賴于短期經(jīng)驗、研究、用戶反饋的積累，很難清楚地了解在哪里以及如何去創(chuàng)造和糾正。

筆者做過一些平面設(shè)計，深切體會到“如果別人拿東西拿東西看細(xì)節(jié)，那么每個部分的細(xì)節(jié)都要仔細(xì)去尋找”。在印刷海報和傳單時，可以輕松復(fù)制數(shù)十萬份，然后被數(shù)千人和數(shù)萬人觀看?？紤]到這一點，您必須仔細(xì)處理屏幕上的每個細(xì)節(jié)。因此，設(shè)計師往往會無緣無故地花一整個下午，只是看著屏幕上的稿件，慢慢調(diào)整字體和顏色，每個標(biāo)題的大小和間距，屏幕上的每個文本和大小Font   and   Spacing   Spacing   和行間距.等

筆者也參與過一些動畫創(chuàng)作，深刻體會到“東西要動，細(xì)節(jié)要考慮更多”：比如動畫的十大定律，物體落地時的變形（物體的不同的材料，不同動畫風(fēng)格的表現(xiàn)也會影響變形程度），動畫人物在表演時的準(zhǔn)備動作……等等，雖然不這樣做不會影響整體表現(xiàn)，但缺少她會讓觀眾覺得有點不好吃。

并參與了用戶界面的制作。再次，我深刻地理解“如果事物仍然可以與用戶交互，那么需要考慮的細(xì)節(jié)就會成倍增加。”因為我們永遠(yuǎn)無法預(yù)測用戶何時會做超出他們預(yù)期的事情。

追求細(xì)節(jié)是一項耗時的工作，但我們必須有追求細(xì)節(jié)的態(tài)度。

按鈕交互細(xì)節(jié)

以網(wǎng)頁上最常見的交互元素為例：按鈕，網(wǎng)頁上的按鈕一般包含三種交互效果：Normal、Hover、Active（Pressed）。通常，網(wǎng)頁設(shè)計人員使用三圖像覆蓋來實現(xiàn)此效果（使用三個單獨的圖像或使用CSS   Sprites）。

有一段時間，F(xiàn)lash   SWF   成為流行的互聯(lián)網(wǎng)最愛?？梢暬膭?chuàng)作界面讓很多創(chuàng)作者覺得不那么反感，成為很多網(wǎng)頁設(shè)計師必學(xué)的軟件之一。 Flash   中預(yù)設(shè)的按鈕元素也提供了相同的交互效果：上、上、下（第四次點擊是檢測區(qū)域）。由于Flash   的動畫特性，用戶可以為每個狀態(tài)添加動畫組件，允許他們?yōu)榘粹o交互添加動態(tài)效果。

好了，現(xiàn)在我們可以給按鈕添加動態(tài)效果了，比如下面的情況： 我們在Over   上放了一個黑色的塊動畫剪輯。當(dāng)用戶將鼠標(biāo)移到按鈕上時會觸發(fā)此動畫：

交互體驗更加生動，但缺少一些東西：因為Over   塊檢測“鼠標(biāo)移到塊上時”以激活動畫效果，以及“鼠標(biāo)離開塊”時。但是沒有對應(yīng)的幀，導(dǎo)致整個動畫效果戛然而止。

魔鬼在細(xì)節(jié)中，想要得到完整的體驗，就必須考慮到這個容易被大家忽略的部分，即不僅僅是光標(biāo)移到按鈕上的動畫效果，光標(biāo)離開的效果也是設(shè)計考慮的細(xì)節(jié)之一，理想狀態(tài)如下圖所示：

如果要考慮這種影響，就必須使用程序控制來達(dá)到目的（無論是Flash   還是CSS/Javascript   等）。通過編程語言進(jìn)行控制可以有效地達(dá)到預(yù)期的效果，讓設(shè)計者的創(chuàng)意想象力更加廣泛，但也存在不能很好地利用圖片，導(dǎo)致創(chuàng)意靈活性較低等缺點。以及其他瀏覽器和平臺的支持。問題。

更多細(xì)節(jié)

“如果某些東西仍然可以與用戶交互，那么細(xì)節(jié)就會成倍增加?！蓖瑯拥睦?，在放慢動畫效果之后，我們會遇到另一個問題：“如果用戶在動畫執(zhí)行到一半，鼠標(biāo)離開了別的地方？”以下面的按鈕組件為例，動畫會突然中斷（因為幀被強制跳轉(zhuǎn)到下一幀）。

相反，這樣做更安全，因為當(dāng)用戶的“光標(biāo)離開檢測區(qū)域，動畫性能被強制停止”時，你不會遇到動畫編程的問題：想象如果光標(biāo)退出，動畫是仍然很慢執(zhí)行時，用戶快速重復(fù)光標(biāo)移動進(jìn)出進(jìn)出這會是另一場災(zāi)難嗎？考慮到這個問題，如果你使用程序控制，你應(yīng)該非常小心這部分的細(xì)節(jié)。

一個小按鈕和簡單的動畫會涉及到如此多的“細(xì)節(jié)”，因為它涉及到用戶交互。雖然尋找細(xì)節(jié)的時間比較長，但大部分時候，恐怕會一不小心就會想到“這部分不影響產(chǎn)品的功能”、“這不是產(chǎn)品的核心”等等上。但正如**設(shè)計師查爾斯埃姆斯所說：“細(xì)節(jié)本身并不是細(xì)節(jié)，而是產(chǎn)品的本質(zhì)?！彼?jīng)過精心調(diào)和和校準(zhǔn)的椅子風(fēng)格至今仍是出色的設(shè)計。

更多高端網(wǎng)站建設(shè)，網(wǎng)站制作，網(wǎng)頁設(shè)計，網(wǎng)站優(yōu)化相關(guān)問題，歡迎咨詢我們的在線客戶或者致電聯(lián)系！