收藏本站
我的資料
   
查看手機網站
其他賬號登錄: 注冊 登錄
      
  • 歡迎光臨衡水易優網絡科技有限公司! 
咨詢電話:18333139811
免費咨詢熱線:
18333139811

網站建設中互動按鈕起到的大小作用

發表時間:2022-12-28 08:41

當建設一個網站完成了核心需求后,我們就可以慢慢準備開始看細節了。


您可以談論產品幾乎每個級別的細節:表面上的內容和表面上的內容。表面上的細節很簡單,只要花時間去做,試一試,犯錯,改正??床灰姷募毠?,比如產品定位、用戶體驗等,往往依賴于短期經驗、研究、用戶反饋的積累,很難清楚地了解在哪里以及如何去創造和糾正。


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


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



并參與了用戶界面的制作。再次,我深刻地理解“如果事物仍然可以與用戶交互,那么需要考慮的細節就會成倍增加?!币驗槲覀冇肋h無法預測用戶何時會做超出他們預期的事情。


追求細節是一項耗時的工作,但我們必須有追求細節的態度。


按鈕交互細節


以網頁上最常見的交互元素為例:按鈕,網頁上的按鈕一般包含三種交互效果:Normal、Hover、Active(Pressed)。通常,網頁設計人員使用三圖像覆蓋來實現此效果(使用三個單獨的圖像或使用CSS   Sprites)。



有一段時間,Flash   SWF   成為流行的互聯網最愛??梢暬膭撟鹘缑孀尯芏鄤撟髡哂X得不那么反感,成為很多網頁設計師必學的軟件之一。 Flash   中預設的按鈕元素也提供了相同的交互效果:上、上、下(第四次點擊是檢測區域)。由于Flash   的動畫特性,用戶可以為每個狀態添加動畫組件,允許他們為按鈕交互添加動態效果。



好了,現在我們可以給按鈕添加動態效果了,比如下面的情況: 我們在Over   上放了一個黑色的塊動畫剪輯。當用戶將鼠標移到按鈕上時會觸發此動畫:



交互體驗更加生動,但缺少一些東西:因為Over   塊檢測“鼠標移到塊上時”以激活動畫效果,以及“鼠標離開塊”時。但是沒有對應的幀,導致整個動畫效果戛然而止。


魔鬼在細節中,想要得到完整的體驗,就必須考慮到這個容易被大家忽略的部分,即不僅僅是光標移到按鈕上的動畫效果,光標離開的效果也是設計考慮的細節之一,理想狀態如下圖所示:



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


更多細節


“如果某些東西仍然可以與用戶交互,那么細節就會成倍增加?!蓖瑯拥睦?,在放慢動畫效果之后,我們會遇到另一個問題:“如果用戶在動畫執行到一半,鼠標離開了別的地方?”以下面的按鈕組件為例,動畫會突然中斷(因為幀被強制跳轉到下一幀)。


相反,這樣做更安全,因為當用戶的“光標離開檢測區域,動畫性能被強制停止”時,你不會遇到動畫編程的問題:想象如果光標退出,動畫是仍然很慢執行時,用戶快速重復光標移動進出進出這會是另一場災難嗎?考慮到這個問題,如果你使用程序控制,你應該非常小心這部分的細節。


一個小按鈕和簡單的動畫會涉及到如此多的“細節”,因為它涉及到用戶交互。雖然尋找細節的時間比較長,但大部分時候,恐怕會一不小心就會想到“這部分不影響產品的功能”、“這不是產品的核心”等等上。但正如**設計師查爾斯埃姆斯所說:“細節本身并不是細節,而是產品的本質?!彼涍^精心調和和校準的椅子風格至今仍是出色的設計。


更多高端網站建設,網站制作,網頁設計,網站優化相關問題,歡迎咨詢我們的在線客戶或者致電聯系!