老實說、自從我一頭栽進 Responsive Web 的世界,又接觸 Bootstrap 後,很久沒去思考「在 Responsive 上我還能玩些什麼花樣」。有人跟我提過 Bootstrap 雖然好用、但也限制許多可能性,所以他們不喜歡。我倒認為它只是項工具、要在網頁上套用它就必須遵循它的規則。

別把它當成開發限制來看,何不當成是「另一種幫助快速完成工作的方式」。Bootstrap 有它的限制,但 Photoshop、Word、Keynote 等也都有各自專攻的領域和無法辦到的部份。如果真的技術高超,想拿 Keynote 來修照片相信都不會有人管你,明明 Bootstrap 可以幫助自己少寫很多 Code、讓技術不怎麼高超的人(就像我)都能夠輕鬆做出 Responsive Web,那嫌他限制太多。「嫌就不要用啊自己純手刻囉嗦什麼!」通常我聽到在嫌 Bootstrap 限制太多的都是設計師不是 RD ,這代表什麼意思相信大家都懂吧。

之前和朋友聊天提到,Responsive 雖然可以在同一頁HTML上做出適合各種尺寸瀏覽器的閱讀,但這一份檔案就為變得很臭很長、靠div 去設定 display,表面上是不會顯示沒錯,但 Browser 還是讀入了,會增加效能的負擔。真要說的話,不管是另寫一套手機板、還是做 Responsive,對我而言,重新寫 2 套一定比較順手啊,省得要在在各 CSS 設定間比對來比對去的。打掉重練比調教直覺多了…

不管是做 App 還是 Web,Function Map、UI Flow 一定要做,Wireframe 也不能省略。缺了一個就要承擔之後整個翻盤重來的風險,老是有人嫌做 Function Map 和 UI Flow 重工、畫 Wireframe 太麻煩為什麼不直接做 Mockup 漂亮得多。如果你的同事講出這樣的話,請立刻離他遠一點,他參與的專案能閃就閃!閃不掉就快把牙齒磨利,開會時用力咬下去。和搞不清楚狀況的人合作、下場可想而知。

我在收到做 Responsive 網站需求的時候,第一件要做的事:把 Function Map 用文字寫好,但不急著做 UI Flow。先打開幾個圖庫站、看看別人怎麼做的。這兩個是非常推薦的收集站:

CSS Galleries / CSSMania
Mobile Web Design | Best Mobile Websites | Mobile Website Gallery

一個專門收集優秀的 Desktop Web,另一個則是收集優秀的 Mobile web。這兩個都網站專門收集已發佈在網路上的各個優良網站,這表示可以按右鍵、檢查元素…我通常會先看看最近流行的網頁設計長什麼樣子,再回過頭來思考 UI Flow。如果網頁不複雜、單頁式就能呈現所有資訊的話,就會跳過 Flow 直接畫Wireframe。(就一頁而已哪來的Flow?把要呈現的內容文字列表列一列就好了。)

我會從 Desktop web 開始規劃,它能呈現的資訊最多最完整,等 Desktop web 設計好後再來簡化製作 Mobile 版本。不重要的功能、在手機上操作很吃力的功能就通通拿掉,為什麼要在手機版裡放一大長串的註冊表單…覺得手機打字很方便嗎?最討厭的就是那種只有首頁做 Responsive 、在主要內容呈現的地方嵌入 Flash …這我都不知道該怎麼吐槽了,看都看不到。

做 Responsive Web 的方式有很多種,哪個不選選Flash…明明有很多方便實際的框架可以套用,不過老公沒教我就不會(喂)。我不是前端、不會 JS,只會 HTML、CSS,做 Responsive Web 都靠 Bootstrap 。HTML 做完後就交給 RD 去套程式和作特效,再怎麼說我自認是位 UI ,要研究的範圍已經太廣,JS 什麼的還是讓 Front-End Developer 來處理吧,人家是專業人士。不懂就誠實說自己不懂,硬要裝懂一開口馬上會被看破手腳、更丟臉。況且 UI 設計師不懂程式很合理啊!又不是專刻 UI 的 RD,方向完全不一樣嘛~(忘記在哪裡看到一篇徵才訊息:UI Designer,要求 Photoshop、Illustrator、HTML、CSS、JAVA、XCode、objective-c、C++…不知道他們要掛多久才徵得到人。)

PS
有人問起 Flash 怎麼做 Responsive,我也不知道,上次無意間開到的網頁是 HTML,只是內容部份通通是 Flash,最上方的 NavBar 和 Footer 是 HTML 文字可點選…可是點進內頁也都還是一樣…主要資訊放 Flash 、塞在 HTML 裡…(後來我有去開 Desktop web 原始碼,開頭就看到它套 BootStrap,技術上它是 Responsive Web 沒錯…)

comments powered by Disqus