iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0
Modern Web

一隻巨大的UI/UX菜鳥系列 第 8

【Day8】平面設計的思考模式

對於平面設計轉型網頁設計,
其實小妹認為最困難的一點,是我們要去習慣一件事:

所有東西擺放的位置,都是要用Code去推出來的。

最常用到的是margin(外距)與padding(內距)

html, body {
  padding: 0px;
  margin: 0px;
}
(只是想試試看Markdown的語法XD)

一般平面設計在製作設計稿時,
都是AI或PS打開,開新檔案,設定紙張大小與RGB/CMYK模式,然後就開始工作。
我們習慣給自己一個紙張大小的限制,在這個限制之下製作設計稿。
並且把想要的東西擺在想要的位置,才開始調整字型與顏色等等。

但網頁設計不是,網頁設計是先把想要的內容全部放進去後,
開始調整所有視覺呈現方式,慢慢推外距與內距到想要的位置,
最後才給整個網頁一個限制的大小。

說起來很像,卻也完全不一樣。
光是限制大小這件事,對小妹來說就非常難以習慣/images/emoticon/emoticon13.gif
我們習慣先固定長寬高去設計,但網頁常常是一整長條的設計,
再經過Code去控制可以顯示的範圍。

畢竟AI不需要寫數值,也不需要去推距離,
因為滑鼠一拉一放、方向鍵連按調整,全選對齊置中,東西就過去了。
對於每個東西的擺放位置,都需要用margin與padding去設定調整,
小妹還需要花點時間習慣阿阿阿阿阿(抱頭
常常到了最後看到網頁白邊,才發現我又忘記設定了/images/emoticon/emoticon02.gif


上一篇
【Day7】初次與工程師們接觸的經驗
下一篇
【Day9】養成常逛設計網頁的習慣
系列文
一隻巨大的UI/UX菜鳥30

1 則留言

2
Chris
iT邦新手 4 級 ‧ 2018-01-19 09:51:38

我自己習慣是這樣
習慣給自己幾個媒材寬度(也許是螢幕,也許是紙張)的限制,在這個限制之下製作網頁
並且思考著元素本身的性質,與可用的排版方式,才開始調整字型與顏色等等。

  • 媒材寬度: 語法上使用 @media 處理,決定排版之前要先決定限制條件。在工程面看起來就是決定交件的規格之一。可參考拙作 media query
  • 元素本身的性質,與可用的排版方式: 元素可以是 inline, block, inline-block 或者是 flex ,另外還有 position 的排版方式。這幾種涵蓋了網頁排版的所有排版方式。但是各自的 CSS 屬性皆有不同。

以上流程,給您參考一下。^^
也許,有助於在一開始談案子,先決定好螢幕寬度,有助於結案順利驗收。

GG iT邦新手 5 級 ‧ 2018-01-27 14:52:01 檢舉

天哪!!!太感謝chris大了!!!/images/emoticon/emoticon32.gif
這對小妹的幫助很大阿阿阿QAQ!!!
尤其是先給一個限制寬度、可用排版,再下去製作的方式,小妹剛接觸網頁設計時全部都反過來做,到最後再來各種調整真的是很笨又吃不消/images/emoticon/emoticon02.gif
chris大的【前端新手村系列】小妹要來好好鑽研了!(跪

Chris iT邦新手 4 級 ‧ 2018-01-27 18:02:49 檢舉

嗯~感謝訂閱拙作。有機會互相交流交流~

我要留言

立即登入留言