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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3684 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

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

WeiBox

改进

网页

26 条回复 • 2014-10-30 18:11:22 +08:00

huoshanhui

2014-10-28 20:15:12 +08:00

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

qiuai

2014-10-28 20:20:12 +08:00

非常不错哦~

koor

2014-10-28 20:34:58 +08:00

很漂亮，95分

Daniel65536

2014-10-28 20:42:45 +08:00

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

2014-10-28 20:43:51 +08:00

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

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

Keinez

2014-10-28 20:47:06 +08:00

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

sharetuan

2014-10-28 21:03:25 +08:00 via iPad

建议用国内服务器哈

WeberXie

2014-10-28 21:04:46 +08:00

见到作者了这是？！

mawing

2014-10-28 21:08:58 +08:00

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

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

a591826944

2014-10-28 21:33:44 +08:00

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

spark

2014-10-28 21:36:42 +08:00

50分

Square

2014-10-28 22:51:05 +08:00

谢谢各位。

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

@Keinez

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

置顶导航已修改。

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

@WeberXie
@a591826944

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

FrancisYim

2014-10-29 00:01:48 +08:00

@Keinez

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

passluo

2014-10-29 00:08:09 +08:00

😰

WenyiJi

2014-10-29 03:55:28 +08:00

@Square

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

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

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

zqjilove

2014-10-29 09:16:04 +08:00

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

bolasblack

2014-10-29 10:04:55 +08:00

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

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

imSam

2014-10-29 11:48:31 +08:00

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

综上所述，谢谢作者。

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

2014-10-29 12:47:03 +08:00 via Android

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

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

neoz

2014-10-29 22:39:08 +08:00

@Square 表示对这件作品感兴趣，请联系我 neooes at gmail.com

cretou8

2014-10-30 00:23:11 +08:00

还是挺好看的

zq9610

2014-10-30 11:50:53 +08:00

@Keinez 为什么wordpress禁止使用svg（说是出于安全考虑）？

idtdi

2014-10-30 17:36:54 +08:00

很棒啊 90分！

Keinez

2014-10-30 18:00:30 +08:00

@zq9610 这个还不清楚，等我研究一下。

Keinez

2014-10-30 18:11:22 +08:00

@zq9610 wp应该是禁用了上传svg的功能。安全方面的考虑大抵如下：
1、svg会导致某些程度的内存漏洞。
2、svg中允许包含javascript，这会导致更多的攻击可能。

由于我不是安全方面的专家所以只能做出这些解答，也许并不专业。更多的答案请Google。