Gee Law ’ s Blog 或者粘贴网址 https://geelaw.blog/
可以发现的几个网站设计的亮点(也就是产品经理常说的 细节):
不好之处也有不少:
所以求关注我的 blog 啦~
1
unique 2017-04-08 01:37:44 +08:00
还不错,挺极客的
|
2
boolean93 2017-04-08 01:38:53 +08:00 1
Gee Law? 怎么读着像“基佬”?(逃)
|
3
Kilerd 2017-04-08 03:10:48 +08:00 via iPhone
怪我不懂艺术,哪里好看了?
|
4
freedomSky 2017-04-08 04:07:44 +08:00
@boolean93 我也这么读都出来了..hah
|
5
hxtheone 2017-04-08 04:53:20 +08:00
并没觉得哪里漂亮
|
6
wolfan 2017-04-08 05:07:10 +08:00 via Android
动态磁贴是怎么实现的?
|
7
geelaw OP |
8
geelaw OP @wolfan 看 index.html 的 meta 和根目录下的 browserconfig.xml 以及 tiles/?.xml (?=1..5 )这些文件。
此外要工作正常还需要一般的动态磁贴要求,例如 XML 不超 5 KB 、图片不超 200 KB ,这很容易忘记导致磁铁不能显示。 |
9
wuling 2017-04-08 11:09:08 +08:00
要不是看了楼主说的这些优点,我会以为这是 10 年前的博客...
|
10
minamike 2017-04-08 11:45:43 +08:00 1
移动端还行 桌面端的右边图片好违和 看起来好乱 还有那个切换亮色暗色的图标为什么要用屎黄色 阅读全文和 tag 的图标太写实 和扁平风格不符
|
13
geelaw OP |
14
geelaw OP ![期待的显示效果]( )
这个是期待的显示效果,在其他操作系统(字体)下 emoji 会有不同的样式。此外右边的图似乎不太好搞,它是主题图,宽度永远是 300px ,高度根据左边的摘要、修改日期和标签产生的高度决定,所以会有点乱。但是我不想它控制高度,所以高度上可能有不一致的现象。我正在考虑解决,例如要求主题图的高度至少是一个固定数。 |
15
Hackghost 2017-04-08 23:24:24 +08:00 via iPhone
捕捉茶园学长一只
|
16
geelaw OP @minamike 感谢您提出的图片乱的问题。我修改了条目列举的实现, so that :
- 当且仅当宽视图且有图片时显示图片; - 如果显示图片,则图片宽度是 320px ,高度至少是 240px ; - 如果左侧文字多,则增加图片高度; - 如果左侧文字少,则在摘要和标签之间增加空白。 相比之前,设定最小高度让条目列举看起来整齐不少;此外标签、日期、评论数的显示也改变了一下,感觉新版本的更整齐。 吐槽一下 HTML 和 CSS 碎片化问题,我一开始用 flex-box 实现的,后来发现 Safari (El Capitan) 居然不支持!于是换回 CSS table 实现。 |
18
geelaw OP @minamike 居然忘了还有 vendor-prefix 可以用 orz ,懒得再改了,反正现在这个也能用。而且这样还可以兼容更多版本的 IE (虽然我没打算兼容 IE10-)。
|
19
boolean93 2017-04-09 16:42:52 +08:00 1
对了,提一个小建议,就是给个最大宽度,否则在我的 21:9 显示器上面看会很丑很丑
|
20
dnsjia 2017-04-09 19:10:38 +08:00 via Android
|
21
sensui7 2017-04-09 20:56:21 +08:00
所有链接改成磁贴的风格, 能否更好看一点? 特别是导航条的风格, 目前看来有点太普通了.
评论的链接放标题或者日期后面能否更好一点 各个元素的 margin 和 padding 是否能细调一下, 现在是否有点随意了呢? article 元素做成大磁贴, 是否能比现在简单的用分割线要好一点? |
22
geelaw OP @boolean93 感谢您的建议,我刚刚实现了在视区宽度大于 1600px 时转换为横向分列排版的形式,并且打印的时候如果宽度大于 1600px 也会采用分栏(大约 720px 到 850px 一栏)。
|
23
geelaw OP @sensui7 感谢您的回复。
上面贴的图已经过时了。 磁贴的信息容量比较有限,展现了标题、摘要和题图之后就没什么其他的空间了(最多可以再用 badge 表现一下评论数),此外磁贴是一个大的点击目标,这样就不能列出标签、直达评论的链接了。另一种设定是采取双面 /peeking 的磁贴,一面是题图+评论数,另一面是标题和摘要,这样做的好处是很容易解决可访问性(对比度)的要求。但是可能因为 timing 不好让读者必须等待磁贴翻面。此外还有一些问题,例如有些文章是没有题图的,这些磁贴的图就不太好弄,再比如现在的题图都是按照 4:3 选择的,增加磁贴之后剪裁很成问题。 现在评论数就是在日期后面,之所以右侧放置是为了保持对齐,如果多次访问我的网站会发现昨今二日里气泡的位置改变了——从数字左边变到右边,这个也是对齐考虑,因为数字的加载需要一段时间,要让数字出现的位置尽量不改变其他元素的位置,否则会有跳动的感觉。 感觉主页可以考虑一下使用磁贴设计,现在的设计对 archive 页面比较合适。 |
24
sensui7 2017-04-09 23:04:15 +08:00
@geelaw 虽然我之前用的 lumia 手机, 但我对磁贴这一形式理解还停留在色块上, 你的回复让我意识到了交互性的特点, 感谢.
|