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

爱意满满的作品展示区。

This topic created in 4222 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

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

WeiBox

改进

网页

26 replies • 2014-10-30 18:11:22 +08:00

buydip

Oct 28, 2014

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

qiuai

PRO

Oct 28, 2014

非常不错哦~

koor

Oct 28, 2014

很漂亮，95分

Daniel65536

Oct 28, 2014

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

Oct 28, 2014

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

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

Keinez

Oct 28, 2014

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

sharetuan

Oct 28, 2014 via iPad

建议用国内服务器哈

WeberXie

Oct 28, 2014

见到作者了这是？！

mawing

Oct 28, 2014

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

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

a591826944

Oct 28, 2014

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

spark

Oct 28, 2014

50分

Square

Oct 28, 2014

谢谢各位。

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

@Keinez

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

置顶导航已修改。

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

@WeberXie
@a591826944

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

FrancisYim

Oct 29, 2014

@Keinez

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

passluo

Oct 29, 2014

😰

WenyiJi

Oct 29, 2014

@Square

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

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

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

zqjilove

Oct 29, 2014

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

bolasblack

Oct 29, 2014

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

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

imSam

Oct 29, 2014

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

综上所述，谢谢作者。

Keinez

Oct 29, 2014 via Android

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

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

Keinez

Oct 29, 2014 via Android

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

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

neoz

Oct 29, 2014

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

cretou8

Oct 30, 2014

还是挺好看的

zq9610

Oct 30, 2014

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

idtdi

Oct 30, 2014

很棒啊 90分！

Keinez

Oct 30, 2014

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

Keinez

Oct 30, 2014

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

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