V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Elethom
V2EX  ›  设计

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

  •  2
     
  •   Elethom · 2015-01-23 16:28:42 +08:00 · 11334 次点击
    这是一个创建于 3583 天前的主题,其中的信息可能已经有所发展或是发生改变。

    無聊作。有感於最近看了許多試圖標新立異卻做得很糟糕的 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 的,當然也都只能是這樣很入門的內容啦。大家有興趣嗎?
    49 条回复    2015-03-24 15:01:54 +08:00
    Elethom
        1
    Elethom  
    OP
       2015-01-23 16:29:40 +08:00   ❤️ 1
    @Livid
    GitHub Flavoured Markdown 的 strikethrough 沒有支持.
    mailunion
        2
    mailunion  
       2015-01-23 16:32:47 +08:00
    不懂设计,第三个为什么两条水平直线不和圆相切,三角形的尖为什么要冒出来,看着难受。
    Livid
        3
    Livid  
    MOD
       2015-01-23 16:37:32 +08:00   ❤️ 1
    @Elethom 好的。现在有了。谢谢。
    Bitex
        4
    Bitex  
       2015-01-23 16:38:24 +08:00 via iPhone
    @mailunion 同问,看着难受
    iptux
        5
    iptux  
       2015-01-23 16:39:10 +08:00
    处女座来挑刺儿,为什么最上面的方块与下面两个方块没有对齐?
    lucky2touch
        6
    lucky2touch  
       2015-01-23 16:39:26 +08:00
    外行人看了不明觉厉啊,感觉某某国旗看起来三种颜色一样宽,实际上物理宽度有差异有异曲同工之妙啊。
    Elethom
        7
    Elethom  
    OP
       2015-01-23 16:41:27 +08:00
    @Livid
    Nice!

    @mailunion
    @Bitex
    當沒有輔助線的時候, 因為形狀的不同圓形和三角形在 (人眼的) 視覺上會小一些, 所以需要修正.
    Elethom
        8
    Elethom  
    OP
       2015-01-23 16:44:29 +08:00
    @iptux
    導出時不小心錯按了方向鍵, 剛剛上傳了新的檔案, 但是不能編輯了. 已經在 Twitter 上聯繫 @Livid 替換.
    Bitex
        9
    Bitex  
       2015-01-23 16:46:18 +08:00 via iPhone
    @Elethom 原来如此。

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

    (咱是Bad Designer…跑
    Elethom
        10
    Elethom  
    OP
       2015-01-23 16:51:10 +08:00   ❤️ 1
    @Bitex

    其實是 bad (lazy) designer 喵~ www

    類似的處理還有 font kerning, 對於大尺寸的西文字體尤為重要.
    ref: http://en.wikipedia.org/wiki/Kerning
    qiayue
        11
    qiayue  
       2015-01-23 16:51:44 +08:00
    @mailunion 因为圆和三角都比方形面积小,所以要突出一点,(去掉两条横线时)视觉上看起来更好
    kokdemo
        12
    kokdemo  
       2015-01-23 16:53:28 +08:00
    @Elethom 不太明白第三个是什么情况……
    leaf
        13
    leaf  
       2015-01-23 16:56:12 +08:00
    都是凭感觉做的,这是啥水平的设计师。。。
    WildCat
        14
    WildCat  
       2015-01-23 17:04:17 +08:00 via iPhone
    Average Designer 换成 Common Designer 或者 Normal Designer 是不是更好一些?
    233
        15
    233  
       2015-01-23 17:09:50 +08:00
    有没有去掉辅助线的图,凭视觉感受一下
    Bitex
        16
    Bitex  
       2015-01-23 17:12:08 +08:00 via iPhone
    又看了几遍标题,突然想起来"普通外科医生"、"高级外科医生"、"史诗外科医生"
    Elethom
        17
    Elethom  
    OP
       2015-01-23 17:14:31 +08:00   ❤️ 1
    @kokdemo
    在附言解釋了.

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

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

    @233
    lausius
        18
    lausius  
       2015-01-23 17:22:33 +08:00
    我想到假如是在UI设计里边,将圆形和三角形放大应该不是个好办法。你要考虑到很多时候图形像素是有限制的,这么做的话,圆形和三角形很可能会被切头切尾。这种情况下,将正方形缩小会更好。
    Dreista
        19
    Dreista  
       2015-01-23 17:31:17 +08:00
    @Elethom 为什么有一种圆形修正不足,三角形修正过度的感觉
    halowhen
        20
    halowhen  
       2015-01-23 17:39:11 +08:00
    LZ所說的視覺校正在字型設計中十分常見,比如NIVEA...
    Elethom
        21
    Elethom  
    OP
       2015-01-23 17:46:00 +08:00
    @Dreista
    你說的沒錯, 等邊三角形和其他兩個形狀等高的時候寬度本來就要多一些, 圓形確實應該比三角形多修正一些. 因為偷懶了只是想表達一下那個意思就隨手拖了一下沒有真的仔細看它, 反正被輔助線蓋著也看不清. (你夠)
    我會懺 (gai) 悔 (zheng) 的. 233
    walkingway
        22
    walkingway  
       2015-01-23 18:06:02 +08:00
    英文字母的间距也是一样的
    lotem
        23
    lotem  
       2015-01-23 18:47:47 +08:00
    「嗯 考虑到视差
    我就是好的设计师啦啦啦」
    treo
        24
    treo  
       2015-01-23 19:14:49 +08:00
    还是cli 好
    yangff
        25
    yangff  
       2015-01-23 19:27:18 +08:00 via Android
    @Elethom 第三个三角形太高了是要逼死强迫症的design嘛
    Keinez
        26
    Keinez  
       2015-01-23 20:14:16 +08:00
    看不懂这三张图的设计师都不合格。
    bitwing
        27
    bitwing  
       2015-01-23 20:17:49 +08:00
    字体?
    BGLL
        28
    BGLL  
       2015-01-23 20:50:45 +08:00   ❤️ 1
    中线对齐就好了,斜过来对齐.....
    各个图形面积不一样看起来大小当然不同......为什么要弄得大小相同?
    yellowV2ex
        29
    yellowV2ex  
       2015-01-23 20:54:48 +08:00
    第三个三角形看起来高了一块高了一角感觉比其他两个要大一号,差评
    loading
        30
    loading  
       2015-01-23 21:00:16 +08:00 via Android
    也就是我常和其他ps切图工友说的:你觉得居中就居中了,不要量像素点……
    vivianalive
        31
    vivianalive  
       2015-01-23 21:08:32 +08:00
    从来都是竖直对其的,代码怎么简单怎么写。
    233
        32
    233  
       2015-01-23 21:39:26 +08:00
    @Elethom 感觉圆和三角的距离差别还是很明显的,但大小真感觉不出什么
    Ringo7
        33
    Ringo7  
       2015-01-24 00:17:32 +08:00
    做设计真累
    PrideChung
        34
    PrideChung  
       2015-01-24 09:26:43 +08:00
    我居然一眼就看懂了楼主的意思,我是不是有当设计师的天分?
    yanghaoling
        35
    yanghaoling  
       2015-01-24 10:14:46 +08:00
    太巧了。昨天做了个家长验证弹窗就是这样的。顺手按了个居中分布就不管了。原来我是个Bad Designer。T T
    jprovim
        36
    jprovim  
       2015-01-24 15:04:04 +08:00
    不看評論和附言根本沒理解.
    bigzhu
        37
    bigzhu  
       2015-01-24 15:05:56 +08:00
    说来说去, 就是一切凭感觉来就对了...

    画什么辅助线, 画辅助线的都是 Bad Designer
    wldouglas
        38
    wldouglas  
       2015-01-25 10:52:22 +08:00
    我想问的是,为毛要把这三个不同形状的东西放在一起
    Keinez
        39
    Keinez  
       2015-01-26 12:30:39 +08:00
    @wldouglas 你做字体设计和标识设计的时候就知道了……
    wldouglas
        40
    wldouglas  
       2015-01-26 13:55:33 +08:00
    @Keinez 那为毛大家都在讨论UI
    Keinez
        41
    Keinez  
       2015-01-26 15:53:22 +08:00
    @wldouglas 我怎知……UI一般不需要计较这些的……
    Elethom
        42
    Elethom  
    OP
       2015-01-26 18:11:16 +08:00 via iPhone
    @Keinez
    @wldouglas
    UI 也要呀, 比如說圓形按鈕和一大段文字對齊的時候...
    Keinez
        43
    Keinez  
       2015-01-26 19:19:45 +08:00
    @Elethom 一般不会有圆形按钮,有的话也是图标类的,这种情况下是使用一个固定了的padding,哪里会有机会给你调……
    Elethom
        44
    Elethom  
    OP
       2015-01-26 20:45:09 +08:00
    @Keinez
    所以說好的設計是有實現成本的.
    Keinez
        45
    Keinez  
       2015-01-26 22:26:55 +08:00
    @Livid
    .reply_content 写成 word-break: break-all 之后把 padding 这个单词截断了。
    Ringo7
        46
    Ringo7  
       2015-01-29 01:35:12 +08:00
    有兴趣,求更新
    monk
        47
    monk  
       2015-02-17 09:02:23 +08:00
    楼主还是很菜,半瓶水晃荡的水平。
    mirukio
        48
    mirukio  
       2015-03-06 14:41:42 +08:00
    其实我没有看懂
    cherryk4y
        49
    cherryk4y  
       2015-03-24 15:01:54 +08:00
    我经常会这样考虑到视觉差所以不会进行绝对的对其,但也不是绝对。要看具体情况。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1152 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 22:59 · PVG 06:59 · LAX 14:59 · JFK 17:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.