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

[Square]

http://www.francisyan.com/portfolio/weibox

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

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

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

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

如果评分满分为 100 分的话，这个网站（从设计上）能得多少分呢？

[huoshanhui]

第一次打开，首页那张大图我还以为没有加载完（这张图太突兀了）。

[qiuai]

非常不错哦~

[koor]

很漂亮，95分

[Daniel65536]

图片加载问题挺明显的，注意大图应该使用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]

左边文本右对齐，扣分。注意人的阅读方式。
正文微软雅黑，扣分。
Navbar上的文字链接没有垂直居中。
小屏幕滚动到底部之后的感受并不好，暂时没有好的解决方案。

暂时就是这么多意见，还算比较中规中矩。

[Keinez]

有人提到jpeg的加载问题，我查看了一下resource，你把intro存成了png，一般不建议这么做。因为png在复杂颜色的情况下实在太大了。在1000左右尺寸及以上的时候，保存为jpg即可。其他jpg的大小中规中矩。

[sharetuan]

建议用国内服务器哈

[WeberXie]

见到作者了这是？！

[mawing]

因为不懂设计所以只挑个刺

字体大小和对齐方式应该统一一下

[a591826944]

这个现在 不能看 热门微博 和 神最右是么？？？强烈建议加上啊

[spark]

50分

[Square]

谢谢各位。

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

@Keinez

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

置顶导航已修改。

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


@WeberXie
@a591826944

抱歉，本人不是该软件作者。我也不认识原作者，我只是该软件的千千万万个用户之一。

[FrancisYim]

@Keinez

还有想请问您心目中的完美和高分的设计作品是哪些呢？可否列举几个，以及一些网站链接？谢谢。

[passluo]

😰

[WenyiJi]

@Square

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

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

“为了让微博的桌面体验变得更好
WeiboX 包含了很多强大又易于使用的功能”太苹果体了。

[zqjilove]

第一屏先要扣掉30分，太妖孽了，这种反人类设计啊

[bolasblack]

请问那个 Avaliable on the AppStore 的图标是苹果提供的还是楼主你自己做的……

这只是我个人的感觉，其实我还是比较喜欢那个黑底白字的图标……

[imSam]

1：目前唯一一款用了一年没换的微博客户端；
2：客户端和官网都支持RETINA；
3：免费；
4：流畅顺滑。

综上所述，谢谢作者。

[Keinez]

@Square 背景的渐变，有两个解决方案。
1、使用CSS3，不过如果你的访问用户里有旧式IE浏览器，这样做效果可能不太好。
2、分离主要图像和背景，将主要图像压缩为jog，取2px宽的背景渐变条，保存为png，平铺。

有关好的网站设计，我一般去awwwards，website awards，CSS awards，fwa。这些是涉及网站整体和交互的。
如果只是寻找样式灵感，dribbble和behance足够。

[Keinez]

忘了说，Windows下我一般黑体宋体搭配着用，少量的雅黑（因为中文好用的黑体实在是太少了）。

追求极致可以学习日本网站直接上svg或者png嗯……