[無聊作] 糟糕的設計師，普通的設計師，好的設計師

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3385 天前的主题，其中的信息可能已经有所发展或是发生改变。

無聊作。有感於最近看了許多試圖標新立異卻做得很糟糕的 UI 設計。

《糟糕的設計師，普通的設計師，好的設計師》之「對齊」
Bad Designer, Average Designer, Good Designer - Alignment

要不要~~（趁著學習 Swift 無聊的空隙）~~做一個系列出來呢？

第 1 条附言 · 2015-01-23 17:11:37 +08:00

解釋一下：

當沒有輔助線的時候，因為形狀的不同圓形和三角形在（人眼的）視覺上會小一些，所以需要修正。

這裏有一個概念叫做 visual weight，當僅涉及 shape 的時候還非常簡單，僅需要做小幅度修正。要保持 balance 除 shape 與 size 外還需要考慮許多其他因素，例如加入 colour 後要考慮的最基本的 contrast 和由 brightness 與 temperature 等綜合起來的感受，以及加入 pattern 後要考慮的 complexity 與 density 等。

雖然本人在設計方面很菜，但如果有人喜歡的話還是可以整理一些類似的有趣的 tips 做一個 series 的，當然也都只能是這樣很入門的內容啦。大家有興趣嗎？

designer

糟糕

alignment

49 条回复 • 2015-03-24 15:01:54 +08:00

Elethom

2015-01-23 16:29:40 +08:00

@Livid
GitHub Flavoured Markdown 的 strikethrough 沒有支持.

mailunion

2015-01-23 16:32:47 +08:00

不懂设计，第三个为什么两条水平直线不和圆相切，三角形的尖为什么要冒出来，看着难受。

Livid

MOD

2015-01-23 16:37:32 +08:00

@Elethom 好的。现在有了。谢谢。

Bitex

2015-01-23 16:38:24 +08:00 via iPhone

@mailunion 同问，看着难受

iptux

2015-01-23 16:39:10 +08:00

处女座来挑刺儿，为什么最上面的方块与下面两个方块没有对齐？

lucky2touch

2015-01-23 16:39:26 +08:00

外行人看了不明觉厉啊，感觉某某国旗看起来三种颜色一样宽，实际上物理宽度有差异有异曲同工之妙啊。

Elethom

2015-01-23 16:41:27 +08:00

@Livid
Nice!

@mailunion
@Bitex
當沒有輔助線的時候, 因為形狀的不同圓形和三角形在 (人眼的) 視覺上會小一些, 所以需要修正.

Elethom

2015-01-23 16:44:29 +08:00

@iptux
導出時不小心錯按了方向鍵, 剛剛上傳了新的檔案, 但是不能編輯了. 已經在 Twitter 上聯繫 @Livid 替換.

Bitex

2015-01-23 16:46:18 +08:00 via iPhone

@Elethom 原来如此。

去看了一下Lollipop的导航键，似乎的确是Good Designer的设计。

（咱是Bad Designer…跑

Elethom

2015-01-23 16:51:10 +08:00

@Bitex

其實是 bad (lazy) designer 喵~ www

類似的處理還有 font kerning, 對於大尺寸的西文字體尤為重要.
ref: http://en.wikipedia.org/wiki/Kerning

qiayue

2015-01-23 16:51:44 +08:00

@mailunion 因为圆和三角都比方形面积小，所以要突出一点，（去掉两条横线时）视觉上看起来更好

kokdemo

2015-01-23 16:53:28 +08:00

@Elethom 不太明白第三个是什么情况……

leaf

2015-01-23 16:56:12 +08:00

都是凭感觉做的，这是啥水平的设计师。。。

WildCat

2015-01-23 17:04:17 +08:00 via iPhone

Average Designer 换成 Common Designer 或者 Normal Designer 是不是更好一些？

233

2015-01-23 17:09:50 +08:00

有没有去掉辅助线的图，凭视觉感受一下

Bitex

2015-01-23 17:12:08 +08:00 via iPhone

又看了几遍标题，突然想起来"普通外科医生"、"高级外科医生"、"史诗外科医生"

Elethom

2015-01-23 17:14:31 +08:00

@kokdemo
在附言解釋了.

@leaf
那是藝術家不是設計師.

@WildCat
呃... 你確定自己和我理解的一致?

@233

lausius

2015-01-23 17:22:33 +08:00

我想到假如是在UI设计里边，将圆形和三角形放大应该不是个好办法。你要考虑到很多时候图形像素是有限制的，这么做的话，圆形和三角形很可能会被切头切尾。这种情况下，将正方形缩小会更好。

Dreista

2015-01-23 17:31:17 +08:00

@Elethom 为什么有一种圆形修正不足，三角形修正过度的感觉

halowhen

2015-01-23 17:39:11 +08:00

LZ所說的視覺校正在字型設計中十分常見，比如NIVEA...

Elethom

2015-01-23 17:46:00 +08:00

@Dreista
你說的沒錯, 等邊三角形和其他兩個形狀等高的時候寬度本來就要多一些, 圓形確實應該比三角形多修正一些. 因為偷懶了只是想表達一下那個意思就隨手拖了一下沒有真的仔細看它, 反正被輔助線蓋著也看不清. (你夠)
我會懺 (gai) 悔 (zheng) 的. 233

walkingway

2015-01-23 18:06:02 +08:00

英文字母的间距也是一样的

lotem

2015-01-23 18:47:47 +08:00

「嗯考虑到视差
我就是好的设计师啦啦啦」

treo

2015-01-23 19:14:49 +08:00

还是cli 好

yangff

2015-01-23 19:27:18 +08:00 via Android

@Elethom 第三个三角形太高了是要逼死强迫症的design嘛

Keinez

2015-01-23 20:14:16 +08:00

看不懂这三张图的设计师都不合格。

bitwing

2015-01-23 20:17:49 +08:00

字体？

BGLL

2015-01-23 20:50:45 +08:00

中线对齐就好了，斜过来对齐.....
各个图形面积不一样看起来大小当然不同......为什么要弄得大小相同？

yellowV2ex

2015-01-23 20:54:48 +08:00

第三个三角形看起来高了一块高了一角感觉比其他两个要大一号，差评

loading

2015-01-23 21:00:16 +08:00 via Android

也就是我常和其他ps切图工友说的：你觉得居中就居中了，不要量像素点……

vivianalive

2015-01-23 21:08:32 +08:00

从来都是竖直对其的，代码怎么简单怎么写。

233

2015-01-23 21:39:26 +08:00

@Elethom 感觉圆和三角的距离差别还是很明显的，但大小真感觉不出什么

Ringo7

2015-01-24 00:17:32 +08:00

做设计真累

PrideChung

2015-01-24 09:26:43 +08:00

我居然一眼就看懂了楼主的意思，我是不是有当设计师的天分？

yanghaoling

2015-01-24 10:14:46 +08:00

太巧了。昨天做了个家长验证弹窗就是这样的。顺手按了个居中分布就不管了。原来我是个Bad Designer。T T

jprovim

2015-01-24 15:04:04 +08:00

不看評論和附言根本沒理解.

bigzhu

2015-01-24 15:05:56 +08:00

说来说去, 就是一切凭感觉来就对了...

画什么辅助线, 画辅助线的都是 Bad Designer

wldouglas

2015-01-25 10:52:22 +08:00

我想问的是，为毛要把这三个不同形状的东西放在一起

Keinez

2015-01-26 12:30:39 +08:00

@wldouglas 你做字体设计和标识设计的时候就知道了……

wldouglas

2015-01-26 13:55:33 +08:00

@Keinez 那为毛大家都在讨论UI

Keinez

2015-01-26 15:53:22 +08:00

@wldouglas 我怎知……UI一般不需要计较这些的……

Elethom

2015-01-26 18:11:16 +08:00 via iPhone

@Keinez
@wldouglas
UI 也要呀, 比如說圓形按鈕和一大段文字對齊的時候...

Keinez

2015-01-26 19:19:45 +08:00

@Elethom 一般不会有圆形按钮，有的话也是图标类的，这种情况下是使用一个固定了的padding，哪里会有机会给你调……

Elethom

2015-01-26 20:45:09 +08:00

@Keinez
所以說好的設計是有實現成本的.

Keinez

2015-01-26 22:26:55 +08:00

@Livid
.reply_content 写成 word-break: break-all 之后把 padding 这个单词截断了。

Ringo7

2015-01-29 01:35:12 +08:00

有兴趣，求更新

monk

2015-02-17 09:02:23 +08:00

楼主还是很菜，半瓶水晃荡的水平。

mirukio

2015-03-06 14:41:42 +08:00

其实我没有看懂

cherryk4y

2015-03-24 15:01:54 +08:00

我经常会这样考虑到视觉差所以不会进行绝对的对其，但也不是绝对。要看具体情况。