V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
设计师推荐装备
WACOM 数位板
推荐阅读
版式设计基础教程 by 南云治嘉
版式设计全攻略 by 佐佐木刚士
yyz267
V2EX  ›  设计师

大家来帮忙参考一个设计噢~,关于杂志式阅读的

  •  
  •   yyz267 · 2012-08-04 12:07:17 +08:00 · 6070 次点击
    这是一个创建于 4478 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近老板叫我做一个关于杂志阅读的设计,偶然发现了这个网站,所以问下大家它这种排版的方式是不是适合阅读内容?如果我做一个修改设计,有没有哪些要注意的地方噢?

    链接在这: http://www.yunjii.com/board/208b2b822ef745188fab1035a929b465
    37 条回复    1970-01-01 08:00:00 +08:00
    lingyired
        1
    lingyired  
       2012-08-04 12:17:11 +08:00   ❤️ 1
    好吧,给我的感觉是凌乱
    yyz267
        2
    yyz267  
    OP
       2012-08-04 12:30:38 +08:00
    @lingyired 恩,老板也是要我改这个,可是不知道如何下手...抓狂= =
    那这个哩? http://at.yoka.com/topic__4fc74a3e09e7294953008348_0.html
    lingyired
        3
    lingyired  
       2012-08-04 13:09:19 +08:00
    @yyz267 都一样- -
    GordianZ
        4
    GordianZ  
    MOD
       2012-08-04 13:12:15 +08:00
    瀑布流放放美女图也就算了,现在真是什么都往上面扔⋯⋯
    ybur
        5
    ybur  
       2012-08-04 13:50:32 +08:00
    文字多的报纸式
    http://blueprintcss.org/tests/parts/sample.html
    图片多的直接找本图多的杂志参考下排版,何必在网上找呢。
    gee
        6
    gee  
       2012-08-04 14:00:46 +08:00   ❤️ 2
    方向没问题。色彩和布局的错落中要有节奏和规律。每个块中标题和图片/内容占的高度太不一致了,而且前一个链接 布局种类太多,很多堆在一起就很凌乱。
    chrome应用商店的布局也是类似的方向,但明显整齐多了
    瀑布流也是一种网格布局,它的规律就是纵列等宽
    各种网格布局:http://siteinspire.com/showcase/category/style/grid_layout/
    yyz267
        7
    yyz267  
    OP
       2012-08-04 14:14:17 +08:00
    @gee 谢谢指点~ 那为什么 http://500px.com/ 的看起来会比较舒服呢?
    kokdemo
        8
    kokdemo  
       2012-08-04 14:39:08 +08:00
    ……这样子的排版不仅阅读有障碍,编辑在后套工作压力也超大吧
    yyz267
        9
    yyz267  
    OP
       2012-08-04 14:41:00 +08:00
    @kokdemo 它这个排版貌似是算法算出来的...
    Eyon
        10
    Eyon  
       2012-08-04 14:44:56 +08:00
    给我的感觉也是凌乱,甚至你老板让你改的那个都比前者好。

    lz 可以参考下 digg.com 的新版,我觉得很舒服,也很杂志
    Quoo
        11
    Quoo  
       2012-08-04 16:00:02 +08:00   ❤️ 1
    额。继续瀑布流就好凌乱了。其实我还是觉得你可以看看imgii.com的方式。最好阅读了。
    Quoo
        12
    Quoo  
       2012-08-04 16:04:52 +08:00
    @yyz267 500px的美感在于,他是展现摄影美图。但是,你的在于展现文字,图片只是你的补充。
    你可以看你的图片展现方式,很多图片,因为算法问题,图片直接被割掉,显示半个脑袋了。直接看起来都莫名其妙的。
    gee
        13
    gee  
       2012-08-04 16:06:24 +08:00
    @yyz267 500px的布局只是比chrome store进化了一点,在块中图和标题的高度是固定的,宽度是1*1,2*2,1*2,2*1的组合,这样还是比较规则,排列也灵活轻松,而且块体积大,一屏不会看到太多。
    更重要的是,各种网格布局都是以图为主,文字用复杂的网格不利于阅读,做做导航还行
    http://ihavenothingtoenvy.blogspot.jp/?view=mosaic blogspot有个mosaic主题,文字多的时候显然不理想了
    baoyalong
        14
    baoyalong  
       2012-08-04 16:57:12 +08:00
    @yyz267 我认为500px的间距比较大,同时图片和标题是分离的,信息的展示比较符合审美,同时没有压迫感。从某种程度说圆角和间距与v2ex很像呢。lz不妨把标题和图片分离,放弃图文混排,再尝试一下
    yyz267
        15
    yyz267  
    OP
       2012-08-04 17:07:52 +08:00
    @Eyon 新版digg整个就是瀑布流诶,这样看信息感觉比较错乱~
    westoy
        16
    westoy  
       2012-08-04 18:22:41 +08:00
    前两天刚好看到一个感觉不错的瀑布流: http://www.lottanieminen.com

    我觉得如果用瀑布流这种大信息量的版式,应该好好考虑留白的问题,其实任何设计留白都特重要。

    关于留白,这篇文章的开篇就有一个很好的范例: http://www.zcool.com.cn/article/ZMjk1MDA=.html
    tiancailaxi
        17
    tiancailaxi  
       2012-08-04 19:53:02 +08:00
    感觉不太好··
    没有分类 没有主次
    很乱··
    各个文章的框框大小也不一样 没有个规范···
    可以分类下 然后每一类的热点放在首页 其他的可以用更多按钮的下拉菜单展现标题或者配图
    X_Del
        18
    X_Del  
       2012-08-04 22:47:28 +08:00
    杂志怎么能忘了 NYTimes http://www.nytimes.com/skimmer/#/Top+News 和 Boston Global http://www.nytimes.com/skimmer/#/Top+News 呢?没有比这更杂志的了。
    X_Del
        19
    X_Del  
       2012-08-04 22:48:20 +08:00
    第2个连接给重了,应该是 http://bostonglobe.com/
    yyz267
        20
    yyz267  
    OP
       2012-08-05 14:40:04 +08:00
    @westoy
    @baoyalong
    @gee
    那你们说类似qq阅读的那种横向翻页的方式是不是更适合阅读呢?http://reader.qq.com
    gee
        21
    gee  
       2012-08-05 15:30:23 +08:00
    @yyz267 类似Flipboard的布局吧,跟纸质杂志一样,每一页的信息量不会太大,的确比较适合阅读
    yyz267
        22
    yyz267  
    OP
       2012-08-05 16:41:07 +08:00
    @gee 但这种查看信息效率就会比较低了哈
    mckincy
        23
    mckincy  
       2012-08-06 17:53:17 +08:00
    我觉得是平面构成的统一性在起作用。

    图片尺寸的统一;
    色彩的统一;
    布局形式(标题位置,字号,字体一致性)的统一;

    还有类似瀑布流的布局,视觉是从上到下的,等宽元素布局对信息辨识最友好,最容易让信息以一种有秩序的方式分布,降低辨识难度。

    http://www.tangibleinteraction.com/

    http://www.arawines.com/
    mckincy
        24
    mckincy  
       2012-08-06 17:58:03 +08:00
    http://2nova.ru/

    类似这种,他的图片外层加了黑色透明度遮罩,让本身图片的颜色统一成一种灰度的方式来展现。
    zern
        25
    zern  
       2012-08-07 08:07:43 +08:00
    可以参考我的网站。。嘛杂志类型的哈~·呵呵
    yyz267
        26
    yyz267  
    OP
       2012-08-07 09:49:06 +08:00
    @zern 横屏你会不会觉得滚的太累了?
    yyz267
        27
    yyz267  
    OP
       2012-08-07 09:49:37 +08:00
    @mckincy mckincy觉得横屏滚动怎么样呢?
    mckincy
        28
    mckincy  
       2012-08-07 09:59:39 +08:00
    @yyz267 我觉得横屏让版式特别一些,就操作来说,还是用鼠标滚轮上下滚最方便面了。

    横向交互类: http://www.artefactgroup.com/
    mckincy
        29
    mckincy  
       2012-08-07 10:24:41 +08:00
    @yyz267 还有mocoloco.com改版过了,以前他家是横滚的。现在是改为竖向了。
    030720229
        30
    030720229  
       2012-08-07 12:11:39 +08:00   ❤️ 1
    我觉得有几个问题需要注意吧;

    a 一行多少个文字,最有利于阅读。一行字太少阅读起来回行太频繁,;累。行太长,很容易串行。
    一般的一行25~30个字比较合适。
    一般来说web上用12px的字,所有文字快的大小就有限制了。
    b 文字和边框的距离,文字的行距,文字的颜色(一般#000 看着挺累的),需要处理好。大片文字 出现本来就会出现信息过载,如果没有主次就是一片模糊。
    yyz267
        31
    yyz267  
    OP
       2012-08-07 12:21:33 +08:00
    @mckincy 如果我鼠标滚动时能整页滚动哩?这样横向滚起来也比较方便吧
    mckincy
        32
    mckincy  
       2012-08-07 13:15:16 +08:00
    @yyz267 嗯呢,那样我觉得挺方便。
    GASALA
        33
    GASALA  
       2012-08-07 15:13:36 +08:00
    关注。最近也需要这方面的启发。
    zern
        34
    zern  
       2012-08-07 21:21:34 +08:00
    @yyz267 我那个是可以滚轮滚动的啊,和普通上下页面操作没啥区别;当然是为了展示古本横卷和折页我认为是最好的办法。而且在PAD上体验也很好,比竖屏好多了。
    mckincy
        35
    mckincy  
       2012-08-07 21:58:21 +08:00
    @zern 很棒: )
    johnnyk
        36
    johnnyk  
       2012-08-18 18:26:02 +08:00
    @lingyired
    @yyz267
    @GordianZ
    @ybur
    @gee
    @kokdemo
    @Quoo
    @Eyon
    @030720229
    @zern

    没想到在这能看到关于云迹的讨论,感谢大家的关注哈。云迹刚刚更新全新的排版系统和界面风格,是全新的设计,希望大家可以继续提些意见哈
    有兴趣的同学可以找我要邀请码,我们还在封闭测试

    可以直接在这里看效果:
    http://www.yunjii.com/board/da136e34963c40dd8d45e7495fe86867
    http://www.yunjii.com/board/95295A15-BA62-42F1-8D14-C56FCE4A32FD
    yyz267
        37
    yyz267  
    OP
       2012-08-21 11:39:05 +08:00
    @johnnyk 好吧,还有翻页效果。弱弱的问下实现原理怎样的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2993 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 13:27 · PVG 21:27 · LAX 05:27 · JFK 08:27
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.