V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Square
V2EX  ›  分享创造

按照自己的意愿将 WeiboX 官网重新设计了一下

  •  
  •   Square · 2014-10-28 19:49:14 +08:00 · 5162 次点击
    这是一个创建于 3704 天前的主题,其中的信息可能已经有所发展或是发生改变。
    http://www.francisyan.com/portfolio/weibox

    花了几天时间按照自己的想法将 WeiboX 官网重新设计。

    我不是网页设计师或程序员,因此无论从设计上还是代码都可能有很大的改进空间。

    我想成为一名网页设计师,因此各位的建议和意见都是我改进自身的鞭策和动力。

    网站服务器放在国外,加载稍慢,还请原谅。

    如果评分满分为 100 分的话,这个网站(从设计上)能得多少分呢?



    26 条回复    2014-10-30 18:11:22 +08:00
    huoshanhui
        1
    huoshanhui  
       2014-10-28 20:15:12 +08:00
    第一次打开,首页那张大图我还以为没有加载完(这张图太突兀了)。
    qiuai
        2
    qiuai  
       2014-10-28 20:20:12 +08:00
    非常不错哦~
    koor
        3
    koor  
       2014-10-28 20:34:58 +08:00
    很漂亮,95分
    Daniel65536
        4
    Daniel65536  
       2014-10-28 20:42:45 +08:00   ❤️ 4
    图片加载问题挺明显的,注意大图应该使用jpg的渐进式功能。

    quote:
    浏览器下载图片的时候渐进式载入,这样下载完一张图可以看到它的样子,只不过只是不清楚的图,这样可以减少你等待看它的时间。

    实际上有两种方式可以实现这种渐进式效果,一种是图像隔行扫描(Interlace),中文可以成为交错,另外一种叫做图像渐进式扫描(Progressive)。
    隔行扫描可以在gif/png中实现。隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在 Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non Interlaced”)。
    渐进式扫描在在jpg中实现。逐级JPG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来,虽然图像不很完美,但是却让浏览者看到了希望,并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。
    via: http://www.zhihu.com/question/19773824
    Keinez
        5
    Keinez  
       2014-10-28 20:43:51 +08:00
    左边文本右对齐,扣分。注意人的阅读方式。
    正文微软雅黑,扣分。
    Navbar上的文字链接没有垂直居中。
    小屏幕滚动到底部之后的感受并不好,暂时没有好的解决方案。

    暂时就是这么多意见,还算比较中规中矩。
    Keinez
        6
    Keinez  
       2014-10-28 20:47:06 +08:00
    有人提到jpeg的加载问题,我查看了一下resource,你把intro存成了png,一般不建议这么做。因为png在复杂颜色的情况下实在太大了。在1000左右尺寸及以上的时候,保存为jpg即可。其他jpg的大小中规中矩。
    sharetuan
        7
    sharetuan  
       2014-10-28 21:03:25 +08:00 via iPad
    建议用国内服务器哈
    WeberXie
        8
    WeberXie  
       2014-10-28 21:04:46 +08:00
    见到作者了这是?!
    mawing
        9
    mawing  
       2014-10-28 21:08:58 +08:00
    因为不懂设计所以只挑个刺

    字体大小和对齐方式应该统一一下
    a591826944
        10
    a591826944  
       2014-10-28 21:33:44 +08:00
    这个现在 不能看 热门微博 和 神最右是么???强烈建议加上啊
    spark
        11
    spark  
       2014-10-28 21:36:42 +08:00
    50分
    Square
        12
    Square  
    OP
       2014-10-28 22:51:05 +08:00
    谢谢各位。

    @Daniel65536 好的,稍后再钻研一下。谢谢您。

    @Keinez

    Windows 下除了微软雅黑还有什么好的中文字体呢? Jhenghei?

    置顶导航已修改。

    对于为什么首页 intro 要用 .png,是因为想到背景使用了 Gradients,而 .jpg 不能透明,所以只能退而求其次。


    @WeberXie
    @a591826944

    抱歉,本人不是该软件作者。我也不认识原作者,我只是该软件的千千万万个用户之一。
    FrancisYim
        13
    FrancisYim  
       2014-10-29 00:01:48 +08:00
    @Keinez

    还有想请问您心目中的完美和高分的设计作品是哪些呢?可否列举几个,以及一些网站链接?谢谢。
    passluo
        14
    passluo  
       2014-10-29 00:08:09 +08:00
    😰
    WenyiJi
        15
    WenyiJi  
       2014-10-29 03:55:28 +08:00
    @Square

    我觉得原作者看到你的网站会喜极而泣。。。设计的真好。

    字体可以换一下,副标题真的很奇怪。

    “为了让微博的桌面体验变得更好
    WeiboX 包含了很多强大又易于使用的功能”太苹果体了。
    zqjilove
        16
    zqjilove  
       2014-10-29 09:16:04 +08:00
    第一屏先要扣掉30分,太妖孽了,这种反人类设计啊
    bolasblack
        17
    bolasblack  
       2014-10-29 10:04:55 +08:00
    请问那个 Avaliable on the AppStore 的图标是苹果提供的还是楼主你自己做的……

    这只是我个人的感觉,其实我还是比较喜欢那个黑底白字的图标……
    imSam
        18
    imSam  
       2014-10-29 11:48:31 +08:00
    1:目前唯一一款用了一年没换的微博客户端;
    2:客户端和官网都支持RETINA;
    3:免费;
    4:流畅顺滑。

    综上所述,谢谢作者。
    Keinez
        19
    Keinez  
       2014-10-29 12:45:16 +08:00 via Android
    @Square 背景的渐变,有两个解决方案。
    1、使用CSS3,不过如果你的访问用户里有旧式IE浏览器,这样做效果可能不太好。
    2、分离主要图像和背景,将主要图像压缩为jog,取2px宽的背景渐变条,保存为png,平铺。

    有关好的网站设计,我一般去awwwards,website awards,CSS awards,fwa。这些是涉及网站整体和交互的。
    如果只是寻找样式灵感,dribbble和behance足够。
    Keinez
        20
    Keinez  
       2014-10-29 12:47:03 +08:00 via Android
    忘了说,Windows下我一般黑体宋体搭配着用,少量的雅黑(因为中文好用的黑体实在是太少了)。

    追求极致可以学习日本网站直接上svg或者png嗯……
    neoz
        21
    neoz  
       2014-10-29 22:39:08 +08:00
    @Square 表示对这件作品感兴趣,请联系我 neooes at gmail.com
    cretou8
        22
    cretou8  
       2014-10-30 00:23:11 +08:00
    还是挺好看的
    zq9610
        23
    zq9610  
       2014-10-30 11:50:53 +08:00
    @Keinez 为什么wordpress禁止使用svg(说是出于安全考虑)?
    idtdi
        24
    idtdi  
       2014-10-30 17:36:54 +08:00
    很棒啊 90分!
    Keinez
        25
    Keinez  
       2014-10-30 18:00:30 +08:00
    @zq9610 这个还不清楚,等我研究一下。
    Keinez
        26
    Keinez  
       2014-10-30 18:11:22 +08:00   ❤️ 1
    @zq9610 wp应该是禁用了上传svg的功能。安全方面的考虑大抵如下:
    1、svg会导致某些程度的内存漏洞。
    2、svg中允许包含javascript,这会导致更多的攻击可能。

    由于我不是安全方面的专家所以只能做出这些解答,也许并不专业。更多的答案请Google。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3511 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 04:51 · PVG 12:51 · LAX 20:51 · JFK 23:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.