Re: [心得] 之前討論的web design (demo)

[cassatte (..)]

背景

HTML 從一開始就沒有想那麼多，只是單純想用簡單的方法交換資料。
當時的環境也沒有現在那麼多理論，電腦可以跑就要偷笑了。

HTML 出生於 1982 年，HTML 4.0 出生於 1997 年，
你要去強求當時好不容易吵架出來的標準符合現在的水準，真的很難。
HTML 就是在歷史的包袱下成長的，還有關於成員廠商的包袱。
HTML 原本不是用來純粹放資料的語言，而是有包含樣式，


製作

在我的想法中，在現代流行的版面的設計與製作可以分成幾個工作部分

1.設計  2.轉檔  3.整合，這次我想從後往前說。

  3.整合

  程式設計師拿到結構優良的HTML碼，很快就套用完成，
  案件結束，領錢，大家都很高興，領了許多年終獎金。

  2.轉檔

  拿到設計的稿子與原始檔，首先將背景與元件分離。
  依照版面層級，以DIV的方式規畫版面，最後將元件放入。
  所有元件都經過仔細檢視，並有良好的命名，

  1.設計

  要讓後面能夠順利進行，設計真的太重要了。

  a.設計必須知道網頁的寬度是幾個pixel，且必須精確計算每個元件的pixel
  b.設計必須知道網頁中的 TILE 方法，讓背景與元件能夠分離
  c.設計必須知道在網頁中要盡量使用系統字體

以上3個是很基本的事情，但很遺憾，很多設計人員並沒有想要搞懂的意思，
持續用他們在做其他東西的方法來做網頁，搞得四不像。
在搞懂HTML標籤之前，我認為這些是更重要的，否則搞懂了有什麼用？
很多人質疑為什麼設計要了解HTML這些鬼東西，但實際上應該說成，

  設計師要了解「網頁」這個媒體的特性。

網頁就是用 pixel 組合而成的，用Photoshop很難精確控制 Pixel，
你就會常常遇到元件尺寸很怪的問題。
若是隨便弄弄的網頁，尺寸問題不會那麼明顯，
但如果是需要動態效果，東移西移，或是突然需要對齊的狀況，那就會想哭了。

網頁是由許多層元件組合而成，要考量到彈性問題。

很多設計都喜歡用慣用的字體來做版面，看起來好像很漂亮，
但是做出來卻發現跟自己想的差很多。


結論

以上只是針對幾個基礎部分來討論，看來似乎跟主題無關，但真的是這樣嗎？

在搞懂「網頁」這個媒體之前做的東西之前，會有什麼問題都不奇怪。
HTML哪有那麼難？那是因為標籤太複雜了才會覺得看不懂。
圖轉HTML哪有那麼難？那是因為圖亂做，很多部分都沒有考慮，才會覺得難。

就是因為很多人把HTML當作一般印刷類平面設計來做，
才會總是有那麼多難整合的版面。


分享

為了應景一下，我分享了我處理這部分的方法。
因為我很懶，所以以下作法一點也不嚴謹，但是很快。

有時會使用Ajax讀取列表資料後，動態產生內容，這時候我有個簡單的做法：

將做好的模板丟進一個專門的隱藏區塊，然後將動態區域以特定字串取代：
<div id="templates" style="display:none">
<div id="tpl-news-item">
  <div id="%id%">
    <div class="news-title">%title%</div>
  </div>
</div>
</div>

之後在就可以用 JavaScript 的 replace 來將東西換掉，再新增到指定的容器


--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.216.141.192
※ 編輯: cassatte        來自: 61.216.141.192       (01/12 07:00)
推 superpai:Photoshop是像素編輯軟體 我想你要說的是Illustrator
我說的是Fireworks～Photoshop很難精確控制像素，反而Illustrator還比較好
關於這方面大概也可以蓋大樓討論了吧！有Fireworks的同好者嗎？

推 superpai:什麼是TILE呀？
台語有一個東西叫「太魯」也就是磁磚，太魯就是TILE，意即拼接
個人認為這是網頁構思過程成敗的關鍵點，連標籤也是有很多TILE的觀念

推 zhengyao:我並不覺得設計非要像程設一樣,有code(html)的潔癖,區塊
→ zhengyao:清楚,圖件目的清楚,能讓接手的程設了解設計概念就足夠了.
設計沒有潔癖，其他就不好接手，要是你看過幾次整個版面都是靠感覺拉的數字
然後要你套動態程式，一改就整個大亂的版面後你就會了解了
不只是能不能運作的問題。
經過大家討論後，我覺得你的東西比較像是資料而非呈現。
呈現的不定因素太多了，尤其有時候又想要有漂亮的外觀。

→ TonyQ:真懷念 , 關於 js template engine 有很多做法.
我覺得這個在解決美工與AJAX與效率上是最好的..

推 LPH66:問題就是這篇文章在說的  設計的不懂哪種設計會讓程設的好做
是的，設計不懂設計，連TAG都不用考慮了，而這才是比較常出現的問題

推 turtleknight:就是欠溝通阿...
欠溝通是在多方都有其專業但互不了解的前提之下
我這裡很明顯就先預設美術是一般的美術

推 Kelunyang:ㄟ對啊，js template engine不就可以處理Z大想要的了XD
但是有隱私與安全性的考量吧！JS TPL在前面也有別人提過了～

推 zhengyao:以js系列為核心是這樣沒錯,後來我轉用較"靈巧"的方便擴充
阿是要多靈巧？整個網頁可以翻觔斗嗎？

→ zhengyao:設計不需要考慮好不好做吧,程設只追求速成會走火入魔喔.
我一再強調設計要了解「網頁」這個媒體，設計要考慮合理性
我也沒有說程式設計要速成，雖然我討論偏了點但也不至於難懂

→ cassatte:我是覺得，討論的過程重點放錯了..
→ cassatte:不是不需要整合的方法，而是這樣的方法是否有必要
這位先生你也覺得自己的討論越來越偏了阿～
※ 編輯: cassatte        來自: 61.231.20.87         (01/13 01:30)
推 superpai:Adobe的那三個軟體你真的搞反了
→ superpai:那是美工ABC 蓋不了大樓
→ cassatte:那可以開一篇來討論，不過PS真的不適合作網頁
→ cassatte:Illustrator可以做網頁你該不會不知道吧？
推 superpai:這麼說好了 如果你的標準可以接受一個向量繪圖軟體
→ superpai:沒理由像素編輯軟體比向量繪圖軟體更不適合
推 superpai:你理由還是精確像素控制..
推 darKyle:Photoshop沒辦法精確控制像素? 山寨版嗎?
推 aceone:對啊 搞反了 用以拉畫出來的線條還會糊糊的...
→ aceone:其實Fireworks比PS更適合做網頁 可無損放大縮小 同時保有
→ aceone:向量跟像素的優點
推 superpai:Firefox很多功能做網頁很方便 但是還是用不慣就放棄了
推 superpai:咦 我打錯字了XD
→ aceone:Firefox很多功能做網頁很方便 ←無誤