/ Web Design

[Layout] Web Design Part 6

對於畫面呈現來說,其實最終目的我相信是一樣的。只是工具不同、過程不同,還有能力的不同而有些微的差異。只是這個些微有時後會讓人感覺起來相當的巨大。無法否定的是,所謂隔行如隔山大概就是這種情況吧。就像我永遠不會有 VD 的美感,而同樣的 VD 可能 也沒有我們這樣的邏輯。

我是說 可能


SIMPLE IS HARD

對多數人而言,切版這件事情倚賴現有而且強大的軟體,可以幫忙我們解決許多問題,像是 hard-coding。對於網頁設計來說,撰寫 HTML code 本來就是一種必要之惡,但是對於多數網頁設計者來說,HTML code 有時候會是一件令人頭痛的事情。

最後我們就依賴軟體帶給我們的便利,所謂的眼睛看得到的結果最準,然後就這樣理所當然的做完一個,我們所謂的網頁設計。只是,我們有沒有想過,當我所謂的網頁設計,交付給後端的時候,無論是交給 PG 或是 F2E,對他們來說或許會變成一場悲劇

PG 不是理所當然要會 HTML/CSS 的!

簡單設計可能不是件容易的事情,大概就跟電燈開關是一樣的道理。UI(User Interface)設計畢竟是很鄉愿的,主流意識或是主觀的價值,如果沒有辦法容易的傳達給使用者(End-User),那麼我無法判斷這樣的設計,算不算得上是一個好的設計,儘管在你的眼中他是完美的。

所以後來,使用者體驗設計(UX Design, User eXperience Design)就突然的被大肆宣揚,追究其根本,還是跟電燈開關一樣的道理。至於什麼叫做使用者體驗,我就不贅述了。

Hard Coding: 寫死

SIMPLE IS VERT HARD?

鑽牛角尖,就有可能會變成Very Hard。我們在製作切版的時候,我說過,最終目的是一樣的。姑且拋開瀏覽器之間的惡鬥,以單一的標準而言,跟著既定的規則走,大抵上不會出太大的亂子(IE 表示:)。既然我們照著規則走,那麼有些很複雜的事情,相對來說就可以變得簡單。

就拿我上次說的食譜來看吧,實際,且別人做過的事情,自己做一遍才能理解箇中奧妙。俗話說得好,坐而言不如起而行。與其看我在這邊練瘋話,實際走過一遍才知道為什麼。

食譜 DEMO:Comicastic demo page

Comicastic demo screen shot

看到這種主視覺,通常還會連帶的給你一個 PSD 檔案。

身為一個 PG/F2E 不會用 Photoshop 是很合理的

不會用 Photoshop 沒有關係,但是不知道從何下手就比較有關係了。我們知道需要的地方,有天(header)、地(footer)、側邊欄(sidebar)、主內容(main),有時候還會有導航選單(navigation)。這些區塊是我們需要用到的,而更詳細的區塊我們當然不會在一開始就去定義他。

Comicastic demo screen shot

怎麼好像不太一樣?如果,我還照著食譜做的話,那麼就沒有太大的意義了。如果剛好我們做出來的結果,跟食譜所寫得剛好雷同,那應該就是巧合。正所謂無巧不成書,天底下哪有那麼多巧合可以出書的,你說是吧。

所以我們先來看 headernavigation 之間的關係。所謂眼見為憑,我們會發現 header 有部份元素超出了範圍,他已經跨入了 navigation 的區塊裡面了。這個時候,我們就得思考兩件事情:

  • header 其實可以將 navigation 給包起來
  • navigation 可能要將定位點往上移動

效果一樣,作法不同。

<div class="header">
    <!-- 我是頁面標頭 -->
    <div class="navigation">
        <!-- 我是導覽選單 -->
    </div>
</div>
<div class="header">
    <!-- 我是頁面標頭 -->
</div>
<div class="navigation">
    <!-- 我是導覽選單 -->
</div>

食譜會跟你說,用第一種,但是為什麼?其實,兩種作法都可以,唯一的差別是:

  • 包起來的樣式表設定,對於 navigation 區塊來說相對容易
  • 改動 navigation 定位點,對於其他元素可能會造成影響

那現在知道為什麼了嗎?我們以不影響其他元素為出發點,選用第一種的理由在此。不過如果你覺得你比較喜歡第二種,你要用也沒有什麼不對。相對來說,你必須對於元素定位點有一定的認知。

接著是 main 區塊,大抵上看來,我們可以切割成兩個部份來看:

  • 上半部,那個看起來相當複雜的區域
  • 下半部,切割成四個小區塊的區域

上半部看起來很惱人(我們不考慮他的動態效果,單就靜態頁面來看)。

Cookbook

直覺上來看他有幾個東西:

  • 有個大框框將所有元素包起來
  • 左右兩邊各有個 <<>> 按鈕
  • 中間是個超人橫幅區塊
  • 右上角有一個對話泡泡框
  • 對話泡泡框右下方有個回應泡泡框

所以我們可以知道有1+3+1+1的框框,為什麼這樣說呢?

<div class="banner-slider">
    <div class="prev-button">
        <!-- 我是向左邊(上一頁)的按鈕 -->
    </div>

    <div class="superman-banner">
        <!-- 我是超人橫幅區塊 -->

        <div class="dialog-bubble">
            <!-- 我是對話泡泡框 -->

            <div class="comment-bubble">
                <!-- 我是回應泡泡框 -->
            </div>
        </div>
    </div>

    <div class="next-button">
        <!-- 我是向右邊(下一頁)的按鈕 -->
    </div>
</div>

所以我們有 1 個大區塊(banner-slider) + 三個小區塊(prev-button, superman-banner, next-button) + 1 個小區塊(dialog-bubble) + 1 個小區塊(comment-bubble)。

這樣看起來似乎很完美了。但是,如果考慮到中間的滑動效果,那麼,我們就必須加上一層區塊,但是要加在哪裡?還有為什麼要加?

為什麼?

區塊與資料

一般來說,我們用以呈現條列式資料的時候,通常會這麼做:

  1. 我是第一名
  2. 我是第二名
  3. 我是第三名
  4. 我是第四名
  5. 我是第五名

然後我們在 HTML code 中會這樣寫著:

<ol>
    <li>我是第一名</li>
    <li>我是第二名</li>
    <li>我是第三名</li>
    <li>我是第四名</li>
    <li>我是第五名</li>
</ol>

如果勤勞一點的人會這樣寫:

1.  我是第一名
2.  我是第二名
3.  我是第三名
4.  我是第四名
5.  我是第五名

我們這裡不考慮那麼勤勞的人。我們知道清單標籤有三種,<ul>...<li>, <ol>...<li>, <dl><dt>...<dd>,這些列表式的標籤有一個共通點。就是會有個大區塊包起來,那麼,同樣的意思,我們如果需要將一個大區塊,製作成列表式的樣子,那麼,我們也會需要一個大區塊,來將資料打包。

所以,剛剛的範例,就需要一個大區塊。

<div class="banners">
    <!-- 我是大區塊 -->

    <div class="superman-banner">
        <!-- 我是超人橫幅區塊 -->

        <div class="dialog-bubble">
            <!-- 我是對話泡泡框 -->

            <div class="comment-bubble">
                <!-- 我是回應泡泡框 -->
            </div>
        </div>
    </div>

    <div class="batman-banner">
        <!-- 我是蝙蝠俠橫幅區塊 -->

        <div class="dialog-bubble">
            <!-- 我是對話泡泡框 -->

            <div class="comment-bubble">
                <!-- 我是回應泡泡框 -->
            </div>
        </div>
    </div>

</div>

這樣對於區塊的應用,有沒有稍微有點概念了呢?

Simple is hard, MAYBE

如果你什麼都不嘗試去做,那就永遠都很困難

If you haven't tried Layout, please do before dismissing it.

If you haven’t tried Sass/Compass, please do before dismissing it.

via Nathan Smith.

下回,我們來看看其他內容,應該會有精彩的行定位說明。