我的作品

[我的作品] 我的第一個網頁project——Dottarry

暑假到現在,花了不少時間在寫網頁,終於把我的第一個網頁生出來了,也就是Dottarry。其實網頁已經寫出來好幾天了,只是現在剛好比較有空,就把寫這個網頁遇到的困難和心得寫出來吧。

網頁:

http://i314i.github.io/Dottarry/

source code:

https://github.com/i314i/Dottarry

一開始,我先嘗試把make page做出來,這個page是在畫點點圖的,也是這個網頁的主要精華。在這裡,我遇到很多很多的困難,可能沒有辦法全部列出,但我試著把他們整理出來。code的部分,就懶的整理了,github程式碼都有註解,這篇主要呈現思維方式就好。

Make Page

版面如何安排?

為了把使用者介面做的更簡單,也更美觀,所以我選擇用bootstrap來排版。這真的是一個正確的決定,因為bootstrap支援rwd,又有各種class可以直接套。套好後,只要根據一些個人的喜愛,設定一些CSS,就可以快的弄出想要的東西。我選擇開了4個column,各column放入一些panel,panel上裝載各式功能,這樣比較簡單明瞭。此外,由於功能都擺在下面,上面可以放一整個canvas,使用者做畫的空間也就變得很寬廣。

各功能如何呈現?

如何呈現功能給使用者使用是一個很困難的設計,這部分我想了很久。例如調整文字和點大小倍率的部分,本來打算讓使用者用輸入的,但想到這樣手機使用者的用戶體驗可能會不太好(鍵盤跑出來很煩),所以改用拉條。我覺得這個設計會讓PC和mobile使用者的體驗度上升(真的不是我在吹XD)。而shape和tool的部分,自覺這部分可以改進的部分應該還可以再提升,只用文字的話,感覺表現度不夠,如果可以設計圖或用gif的話,那個感覺應該會很不錯。

顏色設計的部分,其實蠻掙扎的。本來在考慮要不要弄一個選色盤或可以輸入色碼的東西出來。但在考慮很之後,我還是直接放棄了。其實有幾個原因:

  1. 把選色盤刻出來應該蠻麻煩的(不過我猜應該有類似的github project)。
  2. 手機用戶體驗不好,試想你按一個東西,還會有一個色盤跳出來擋住視線,那感覺一定很差。當然,也是可以直接把調色盤就刻在panel上,但這樣我的色塊就不好綁定event listener。
  3. 直接幫使用者選好常用的顏色,要什麼顏色一目瞭然。
  4. 列出色塊比較好設定event listener。

 

所以,基於以上原因,我選擇列出色塊了。當然,還是有一個地方還可以再更好,就是選的顏色可以超過8色那更好。但這部分的code牽涉到多行色塊的排列和位置判定,比較難寫(也有可能是我太廢,不會寫),所以我就作罷了。

Event Listener

Event listener也是UX的一環,因此我想要設計的盡可能簡單,畢竟,最好的設計就是使用者不用看說明書就會。這部分,我承認我還不是做的很好。

拉條左右拉動,按鈕hover state這些都是比較簡單但實用的event listener,加了UX大大提升。

色塊選擇和刪除的部分,我使用onclick觸發,因為這是最直觀的操作模式。我發現選色的部分,使用者不會有什麼問題,但刪除色塊的部分,使用者可能會不知道原來按上面的色塊是刪除。這部分是我沒有做好的部分。而挑選橡皮擦顏色和形狀以及改變顏色順序的部分,我則是設定用拖曳的方式。這裡的javascript非常的不好寫,因為html5似乎是把所有設定dragevent的element都視為類似的東西。這也就使我要多寫很多code判斷我現在拖的是什麼東西,到底有沒有落在範圍內,如果沒有落在範圍內,我還得做各種例外處理。其中,我覺得拖曳色塊改變順序的設計不錯,而橡皮擦的部分,那就有待改進了,因為如果沒有看說明書的使用者,9成5不會知道這個用法。

會設定這麼多拖曳的event listener,主要還是我不想把畫面再顯示個什麼選框,把畫面蓋住,所以才會出此策,這樣也方便手機做操作。但是,一定有更好的方法可以替換掉這玩意,只是我還沒想到。

手機平板操作部分,因為畫面小,如果又加上拖曳的話,那簡直是自找苦吃。所以我把它改成長按了。

圖片顯示

圖片顯示的部分,因為是畫在canvas上,然後再不斷的去刷新它,所以就是注意各個東西畫在圖上的順序就好了,例如像橡皮擦、背景、點點都有一定的繪製順序。

額外溫馨提醒

這個功能是我很喜歡的設計,總覺得在特定狀況,dialog從畫面上方跳下來,那個感覺真的很棒。這個靈感來自DCARD看卡友時,如果在卡友的圖上點右鍵,就會出現這樣的dialog(我的確是不小心點到發現的)。所以為了營造好的動畫效果,我自己刻了一個dialog,選定的動畫是會跑過頭一點點,再回來一來一些些的,這是所有easing裡面最療癒的!

千千萬萬不要用alert,鐵定毀了整個網頁的感覺。

Main Page

版面安排和美工

這部分選用一直scroll down的樣式,配以簡單的描述和圖片,這是近年來最流行的網站設計風格。因為我的網頁不是在介紹什麼東西,所以也不會有什麼精采的照片可以放背景,所以又讓整體設計變得更艱難。畢竟我不是設計的料,總覺得弄出來的網頁還是不太協調,不管是在顏色搭配還是動線及視線的安排上面,都有極大的進步空間。

另外,這次的網站,都有搭配rwd,所以寫起來又隔外費工,要一個一個去看,一個一個去調。但是把所有的東西都設定好後,可以支援各尺寸裝置,那種感覺真的很棒!

版面程式撰寫的部分,我先用webflow大約抓過一次後,把code弄下來,再去改,但是這樣還是很花時間。

動畫

動畫的部分,有分為只會出現一次和會一直重複出現兩種。重複出現的設計起來比較麻煩,要判斷捲軸現在在哪,以及它是由下往上轉還是由上往下轉。但是這個的效果我自認不錯,從兩旁刷進來介紹功能的這個動畫,有引人入勝的感覺。

Help & Example Page

這部分我其實己經想好要怎麼寫了,而且如果完成了,一定會很精采。但是迫於時間因素,我只好把這個部分先暫停起來,之後有空的時候再慢慢弄。

ALL

這次寫project,一直遇到一個拖慢網頁進度的事,那就是配色和使用者UI/UX的設計,反而寫javascript功能的時間相對少。以後開發的時候,應該會把CSS設計的部分大量減少,畢竟這東西在這次project已經習得至少8成的概念了。接著把注意力放在javascript的開發上,因我總覺得我的code還是寫的很爛,架構有一些地方規劃的不太好,管理起來不是那麼的方便。

說實在話,已經有好一段時間沒有寫這麼多行的程式了,把html、CSS、javascript加起來,也大概有快3000行吧!回頭看看自己寫的程式,不管寫的好不好,都覺得很舒坦XD

7 thoughts on “[我的作品] 我的第一個網頁project——Dottarry

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s