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

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

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

    链接在这: 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  
       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     Solana     2700 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 06:13 PVG 14:13 LAX 22:13 JFK 01:13
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86