[心得] JS 網頁互動的情緒語言

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

image

 

參加 了FB JavaScript.tw 社團 在 3/7 舉辦的小聚

第一場的講者為 JS 的強者 tonyQ ,由於他講的議題蠻多的,之後再整理內容

 

而第二場演講者為:振美資訊的 Amosa Yang (CTO)

講題主要跟一些前端介面的感受有關

以下大概整理了他分享的內容與我自己加的一些註解

 

 

學習 JS 的動機

在最初時可能是需要 Form 元件,可能是需要某種特效,大部份是客戶的需求

但一切辛苦的原因可能都是因為「愛」

有愛才做的出好作品阿,不然隨便做也是可以交差

OS : 我記得當初學網站時就是喜歡用動畫阿,所以就接觸了 JS  :P

 

客戶的需求總是….

image

OS : 好寫實 orz…

 

網站設計公司的分工

如果以製作一個人來比喻的話

  • 企劃人員: 決定想要生出怎樣的人
  • 製成工程師 (切版工程師) :決定人的身材
  • 視覺設計師:決定人的面貌
  • 程式設計師:決定人的功能

OS : 感覺常常一人分飾多角….

 

前端工程師 (F2E) FrontEnd Engineer

image

圖片來源:http://www.nowamagic.net/webdesign/webdesign_WebUISkills.php

 

(1) 支援視覺設計師的 1pixel 差異..

(2) 透過 JS 的互動性,表現網站給瀏覽者的體驗

(3) 不一定會畫畫,但是必須有美感

OS : 前端設計師也是怎樣都學不完的職業吧…

 

jQuery Easing Plugin 所帶來的情緒

俏皮:easeBounce / easeElastic / easeBack

穩重:easeQuad / easeQuart

工程:easeCubic / easeSine /

簡潔:easeQuint / easeExpo

OS : 我蠻喜歡這種比喻方式,下次來整理一張表把每個效果所代表的情緒好了 哈

 

情境模擬

(1) 可以用動畫的速度來營運情境

(2) 可以用字的間距規劃緊湊的感覺

OS : 會有這種想法應該就是設計師吧 XD ,一般程式人員比較在意的是把功能寫出來,但設計師的思考邏輯比較能夠從人的感受來判斷。

 

分享網站:http://annasafroncik.it/

image

OS : 這個網站用 elastic 效果營造活潑的感覺,整體是由時間軸從上往下走,蠻有特色的

 

分享網站:www.awwwards.com

image 

OS : 這個網站收集了很多參與比賽的作品,還會有專業講評與評價,比較多的是歐洲那邊的作品,仔細看了一下這裡真的有很多很不錯的網站,可以當設計時的參考

 

案例:shopallblack.com

此為該講者參與製作的網站,主要是以賣女鞋為主

image

(1) 購物車的數字會跳動,提升使用者的購買體驗

(2) 用顏色勾起消費者的慾望

OS : 感覺有針對特定社群 ( 女性族群) ,網頁蠻走女性質感風格,雖然速度有一點點慢,但是不知為什麼覺得網站有一點點空…雖說是留白但總有種太單調的感覺,感覺設計不夠大氣,相較起來我比較喜歡 http://www.pinkoi.com/ 的風格,就有種很熱鬧的感覺

 

結論

講者 : 寫網頁就好像在做一個人,盡量把細節做到最好,每個動畫都代表著某種情緒,雖然有時候為了營造感覺或是加動畫會增加許多開發時間,但是其實為了使用者體驗的提升,其實一切都很值得。

OS : 寫動態網站真的很好玩,雖然面對的是醜醜的 Code XD  ( 題外話,最近用 Sublime Text 2 來寫程式,突然覺得 Code 變漂亮了 ,哈哈,但是最開心的就是別人看到你精心設計的效果的時候,有種爽快的 Fu !

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273