V2EX YY-Design: 极简移动版界面

[lianghai]

看到 @disinfeqt 的帖子我也手痒痒了。

这些天开始用 iPhone，德里的移动运营商很混蛋，不对我的 iPhone 提供常规的流量包月，于是得省着用流量了。
一个不显示头像的界面也会不错吧（像原来的 v2ex.com/1 一样）。

http://cl.ly/3KCC

建议用 Review.app 来模拟（原始尺寸在 cl.ly 的 3Jw4）。

受到 Calvetica.app 和 iOS 原生界面（Safari 的地址栏提示）的影响。

之所以说是 YY（意淫）：
1. 其实 iOS 4 里没有 Hiragino Sans GB，所以效果会大打折扣（黑体-简）；XD
2. 彻底针对 iPhone 4；
3. 彻底根据自己的体会调整了很多（对于 iPhone 来说，独立的记事本应用更方便；简化掉了回复计数，去掉了无回复的状态；因为没有计数了，所以用更简单的方式标记“未读/已读”；用很抽象的方式表示了楼主和最新回复者）。

大家一起来 YY 吧～
最后一起做个 ad-hoc 版的 app 来上 V2EX 如何？

[lianghai]

@GordianZ 其实我在想，这个色条的设计尝试如果和别的字体组合放在一起，就不那么舒服了——Hiragino Sans GB 太威武了……看到 @Livid 的反应，我也泪目了…… @.~ @...

[lianghai]

今天被 Photoshop 的排版能力不足麻烦死了，InDesign 又不能那么方便地调整字体抗锯齿风格，而且不好精确到像素。
这种简单的 mockup 用 Photoshop 真不合适——明天试试直接用 HTML+CSS 做 mockup…… =。=

下一步试试首页的页脚和 /member/*

[lianghai]

这是在两个平台上对最新结果截图的对比：
http://cl.ly/3Kn7
原始尺寸 iPhone 截图见 cl.ly 的 3LYb

全部成果已经 push 到了：
https://github.com/lianghai/v2type

感觉在首页显示一堆节点名称意义不大，正在考虑是否要把快速发帖这一想法加入 /home
这样的风格果然还是更适合陈列信息而不是提供交互功能——为搜索栏这样的地方可能还是得加上一些图标，不能用纯文字。
试了一把 SVG～
今天完成了基本的页面结构……接下来应该快一些了……

iPhone 4 的 Retina display 带来的像素密度问题真是让人晕头转向，怪不得至今都还有那么多应用没有为 Retina display 做优化。
:P

[Olivia]

@lianghai 嗯 看到了 我用美丽来形容

[Los]

相当不错

[napoleonu]

相当不错哈

[lianghai]

汇报今日进展：

周末太兴奋了，困加头疼一天……
强迫症地从 http://v2ex.com/t/4527 的页面源代码把每一层楼复制出来做 mockup……惟一的遗憾就是时间标记不够多样。
/t 的 mockup 做了一半，在考虑要不要把楼主的楼层做出特殊样式——是凸显楼主和自己主题讨论的特殊关系，还是维持主题内容的平等与平坦，这是个问题。
看到 Facebook 对公共页面的“Like”按钮的处理，感觉到确实“favorite”与“unfavorite”这一开关的两种状态不用太对称。
在考虑要不要用 webfonts.fonts.com 的简体中文 web font 试试，说不定会有惊喜呢。
我想把蓝色留给一个页面中最需要注意的一类信息，于是在 /t 里蓝色分给了每层楼的用户名，但这样那些 <a> 应该用什么样式呢？
另外，因为觉得 @vayn 在 #4 的想法确实很有趣，于是昨天就已经实践了，在截图里就能看出来。
在移动设备上，空间不充裕，于是把桌面版的 reply.png 这个东西和楼层编号合并应该还是可以的——只是有时确实我们不是针对某层楼回复的，这种时候就让用户不舒服了。

综上，今天其实没有做出真正可见的进展，所以就不 push 到 GitHub 也不发截图了。
明天见～ XD

[Los]

加油，这将是一个经典

[Kai]

@lianghai Awesome job! (will be)

[diamondtin]

越狱后可以在iphone4里面将STHeiti替换为“Hiragino Sans GB”的，效果就可以接近mockup了。BTW: Hiragino Sans GB的w6粗体真的很粗 :D

[lianghai]

@diamondtin 是的...只是这样的解决方案是不现实的 >_< 另外我觉得只有 W6 这样能和西文粗体黑度一致的中文粗体才是有意义的嘛...

[lianghai]

http://cl.ly/3NOy

今日成果。

终于把这两个 mockup 都几乎原封不动地用 HTML&CSS 重建了。接下来可以做其他的页面了，并且对这俩页面的设计做调整。
利用“<meta name="viewport" content="width=640; initial-scale=0.5; maximum-scale=0.5; minimum-scale=0.5; user-scalable=no"/>”很暴力地让 iPhone 4 的 Safari 能显示 1px 的边框，暂时先这样了。
看到大家的推荐于是开始用 Espresso——神奇的软件！
嗯右上方的那颗“♥”在 iOS 里会好看得多，因为字体不一样。

最新版本已 push 到 https://github.com/lianghai/v2type
睡觉去了～

[lianghai]

我又来盖楼了……

http://cl.ly/3Nqb
我看见了渣打……XD

这是一个很傻的 Mentions 页面。
其实这些灰色在 iPhone 4 上的效果还好，只是在我的 MBP 上觉得特别不舒服……
如果把节点和帖子标题格式化为标准的正文深灰色，就和 mentioning 的内容无从区分，但现在这德行又让每一条 mention 的这个矩形的上半部分空虚软弱。
需要严重优化。

把页首黑色条下边的那个指示当前页面主要内容的条改成比背景深一档的灰色了——完全是为了解决之前的 mockup 里无法在页面中平行排列多种内容的问题（比如，没法清晰地把首页从上到下出现的最近主题、常用节点和搜索条简单明了地分隔开），所以现在成灰色之后，页面就有 section 感觉了，像这样（当然还需要一些调整，现在看起来各个部分之间太近了）：
http://cl.ly/3Nqy

我在各个 mockup 页面之间加了链接，所以现在可以点来点去玩了……

还是 push 到了 https://github.com/lianghai/v2type

今天悲剧地因为没加“-webkit-text-size-adjust: none;”而折腾了一个小时，面对 iPhone 上的诡异字体大小而无语，几次想发帖求助了，后来想起来 @jjgod 说的 webkit-text-size-adjust 的问题，于是在 @Livid 的 CSS 里确实找到了它……

[Elix]

我还是比较喜欢黑色版本的。
个人不喜欢过多的颜色(不包括各种灰度)和字体，这估计是平面设计的观念根深蒂固的原因。

[lianghai]

@Elix

其实我在这个设计尝试中也只用了一个字体组合（Helvetica Neue + Hiragino Sans GB），两种字号，以及两种磅重（常规和粗体），应该在文字上还算比较简单了。只是为了在最小的空间上让信息的功能更加明确，觉得色彩已经是最好的解决方案了。

我很想知道，是什么“平面设计的观念”使您“不喜欢过多的颜色（不包括各种灰度）和字体”呢？

另外，非常期待您能从专业设计师的角度为这一组设计尝试提出一些建议。

[lianghai]

@Elix 对了，顺便说一下，这个 [1] 页面正文的第三段前两行各有一个严重而且显眼的错误，相信以您的洞察力应该很容易改正过来 :)

[1] http://www.elixzhang.com/blog/about-2

[Livid]

Very exciting.

[Elix]

@lianghai 请原谅我的表述不够严谨，严格的来说，应该是在“平面设计”中的“版式设计”这个范畴里，讨论关于字体和颜色这个话题。

在传统的纸质媒体上，如果是为了便于阅读，应该尽量减少所用的字体和字体的颜色。这样有利于突出所要表达的“逻辑”。
其实也就是所谓的“重点”。因为太多的字体的大小会造成阅读逻辑的混乱。所以我个人一直非常在意在设计中使用不超过3种字体以及谨慎地使用变体(斜体和加粗)。

回到上面的两个设计中来：
第一个黄色的版本，节点，标题，发贴者，内容，链接，各自使用了近似并且都很突出的颜色和字体。眼球一下子不容易抓住重点。
相比之下，黑色的版本强化了标题(加粗和黑色)，弱化了发贴者，节点等(灰色)视觉上比较容易找到重点。

非常惭愧的是，我不做设计已经快6年了。在这里说设计未免有点站着说话不腰疼的架势。
惭愧惭愧

[Elix]

@Livid 还没睡觉？这又是一个通宵啊。。。

[Elix]

@lianghai 关于自己的这个页面，我抄袭了Livid很久之前的自我介绍。。。诶。。请原谅一个老人家的懒惰。感谢提醒，已经改正。