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 如何？

[freefcw]

恩，不错
不过我倒是觉得author应该比所在区域更重要一点

[lianghai]

@freefcw
今天我真切地感觉到了 Retina display 的威力——一切无感的文字排版放到它上面都好看，和普通屏幕真是天壤之别……
我仔细思考了一下楼主和节点这二者的问题，觉得还是得把节点放在最醒目的地方，而且得是能和主题一起*连贯阅读*的位置上（而且最好是开头），这样才能解决现在很多人不注意节点就随口回复的问题。而楼主名字，总感觉是个相当不重要的信息……只要确保需要查看的时候能方便地看到就好了。

对了，对于每一条帖子的展示，我是以这个逻辑进行的（这和 V2EX 现在的思路不太一样）：

在“某节点”这一话题下；
“某人”（楼主）、“某人”、“某人”……“某人”、以及于“某时刻”发表最新回复的“某人”参与了讨论；
讨论的主题为“帖子标题”。

[shawiz]

设计很美观。左边的已读/未读功能可能会误导用户，因为有点像滚动条 = =

[vayn]

那几个点可以用来表示回复数，1个点代表小于10回复，2个点代表小于30等等。反正回复计数已经被简化了么……

[Sai]

WP7 Metro UI灵魂附体

[lianghai]

@shawiz 哈哈纯属自娱自乐——不过左侧的条状物应该不会真的让用户以为是滚动条吧，毕竟惯性思维会让人觉得滚动条还是在右边的。

@vayn 这个想法好玩呀！而且介于 V2EX 如此 geeky，用以 2 为底的对数好了，0 个点代表 1 条回复（正好就是楼主和回复者的名字并列），1 个点代表 2 条回复，2 个点代表不多于 4 条回复…… XD
这样的话， http://v2ex.com/t/815 需要 8 个点，哈哈：

翻译 Olivia ........ chenggiant, 1 d 15 h ago
Rework 简体中文翻译版 在线阅读

哇， http://v2ex.com/t/4383 需要 9 个点！

分享发现 plidezus ......... plidezus, 1 d 10 h ago
跟朋友合作的二手书交换网站，有兴趣的各位来内测啦～

@Sai 表示还是很荣幸的——刚想说这里没有 Arial 的那个可怕的“R”，就反应过来 Metro 用的是 Segoe……

[imsein]

你这个还可以，但感觉现在的v2ex更高清些，你的大字体设计可能用在 240x320 界面更好 ：）

[aligo]

cool！LZ我可以用这个设计吗。。。

[Banana_Co]

右边的蓝条，首先想到的是Remember The milk

[lianghai]

@imsein 其实这个设想完全是在依赖 Retina display 对字体细节美的呈现，在 240×320 上就没有这种像印刷一样的细腻感啦～而且文字尺寸并不大，和 iOS 里 Safari 对地址栏输入的提示信息文本是一样大的，这样的信息密度比较舒适。

@aligo 哦这只是个草稿而已，欢迎利用它来做更好的设计！不过它在普通像素密度的屏幕（非 Retina Display）上，加上用微软雅黑，效果可能不会太好。

[lianghai]

@Banana_Co 啊，看来英雄所见略同～不过 RTM 的蓝条的“重量”要大得多，压抑了左侧的空间。另外，对 RTM 最深刻的印象就是他们中文页面图片中的悲惨字体。

[zipaiwang]

不要拿掉一个社区的头像元素 这是底线

[lianghai]

@zipaiwang V2EX 的核心价值不像人人等 SNS 一样在于用户的丰富个性信息，这里文字的意义更大。对于一个不提供自定义显示名称和自定义签名的简洁的系统来说，头像的存在与否不是底线——何况这个草稿只是一个极端的“试图”从 typography 下手的小众方案而已。

[xiaoyao]

这个UI看起来很WP7……

[lianghai]

又整了一个 /t（已加入收藏的）玩：
http://cl.ly/3KaL
目前的问题：
因为偷懒，所以没改行距就直接从上一张图来改了，现在这行距对移动设备来说稍大了一点；
每一层楼的上下 padding 太小，导致和高大的空行对比起来很古怪；
favorite/unfavorite 按钮和 sign out 按钮太紧，可能会有误操作。

用于 Retina display 的原始尺寸 mockup，在 cl.ly 的 3KEr

[Livid]

@lianghai 你下毒成功。。。

[walker44]

中毒了。

[lianghai]

一不小心就被认为是下毒了……热泪盈眶 @_@

[Livid]

@lianghai 为了这个设计，我会调整开发计划。

[GordianZ]

@lianghai 当初我也有一个针对移动页面的设计用的这种左边色条做提示的，结果我怎么也弄不好看，泪目……

[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很久之前的自我介绍。。。诶。。请原谅一个老人家的懒惰。感谢提醒，已经改正。

[Livid]

@Elix 刚刚看完最新一期 Wired，半夜的咖啡和安静时刻。

最近对和 Condé Nast 有关的一切越来越着迷了。

[Elix]

@Livid 我最近一直坚持看完的杂志是《财经》和《第一财经周刊CBN Weekly》
现在已经不是半夜，是早上了。

[lianghai]

另外，这几天我在想一个常常会针对各种网站蹦出来的想法：
能不能在设置中提供一个“专家”选项。启用之后，界面的一切非必要的针对新手的信息全部消失，比如一些冗长的措词、提示信息等等。

@Elix

“黑色的版本”指的是顶楼和 23 楼出现的截图里的那个吗？哦其实所谓“黄色的版本”是已标记为“收藏”的主题（此时用页首的一抹黄色来把主题页面鲜明地特殊化出来，平时它是浅灰色的），而“黑色的版本”是首页的最新主题列表，这两个页面因为功能的迥异而有很不同的考量：

最新主题列表中最重要的信息是主题的标题内容，其他一切从简（不过节点名称不能太弱化，因为从 V2EX 这几个月的运行能明显感觉到节点不够醒目是个问题）；
而主题页面（包括 Mentions 页面），我认为最重要的信息是“谁说了什么”，所以一定要把每层楼作者的用户名以及互相 mention 的标记凸显出来。不过这个页面的页首部分确实没有优化好，因为顶楼的信息比较繁杂，我会考虑是不是要把楼主用户名的蓝色去掉（不过其实在非收藏状态下这个部分的混乱并不明显），但也想让整个主题内每层楼的蓝色粗体用户名保持连贯。

你对那片黄色区域的感受确实非常准确，我老看老看就麻木了，现在看来它的混乱是很明显的。

嗯，我在版式设计方面的看法和你是一致的。不过我觉得西文中使用 italic 是非常重要而且对阅读友好的手段，但中文确实基本不能使用那种所谓的斜体。而字体数量的事情，我觉得还是和具体情况关系很大的，有时一个 typeface family 就能让版面无比复杂和丰富，而有的多种字体搭配在一起也能让一个信息确实很复杂的内容很易读。

自我介绍的这个页面，当时我第一眼看到就惊了，心想要不然就是借鉴了 livid.cn，要不然就是世界上英雄所见略同了 :P 不过还是有一个拼写错误没有改过来：“Adobe Creative Suit 5”。

[Livid]

@lianghai 我也觉得很多提示看着就恶心，思索中。

[Elix]

@lianghai 好吧，我承认，我老了，我困了

我刚才说的黄色版本，是这个 http://cl.ly/3NOy
黑色的版本，是这个 http://cl.ly/3Nqb

关于V2EX注重是是“说了什么”还是“谁说了什么”，我想这个问题只有 @Livid 自己能够回答。我们没办法越俎代庖。版式的设计，无论在纸质的时代还是在数字化的时代，应该有某些原理是相通的。不过很可惜，现在已经很少有人会去思考这些问题了

关于我的About页面。。。不是借鉴，是彻彻底底的“抄袭”。我基本上连语气和语调都没变。

[lianghai]

@Livid 我最初出现“专家模式”这样一个想法是在当年体验 http://www.haodou.com/ 的前身的时候（当时似乎那是 @Sai 和 @titan 的项目呢），我在一些界面见到了特别详尽的针对表单每一项的说明，心想要是自己真的天天用这个网站，天天看到这些温柔的说明，得多可怕。（我有点陷入迷思了，说不定我是首先在 @Sai 的设计里看到“专家模式”的也说不准。）

@Elix 哈，很多人都是，用 Adobe CS 用六七年了仍然没有注意到“suite”和“suit”的区别。这是个很有意思的集体迷思。

:D 作为用户，通过各种方式向 @Livid 反馈我们对 PB2 以及 V2EX 的感受是我们义不容辞的重担，包括这个最初纯粹是自娱自乐的设计尝试。让 @Livid 一个人构思所有的用户体验多没意思啊，我们要用用户反馈的信息淹没他。展示出无限可能。

版式设计 / typography 这事，在 V2EX 还是有几位朋友很热衷于此的。包括我最近开始频繁上 Twitter，感觉自己时间线里绝大多数的信息也都是 typography 相关，很有意思。

睡觉了，这几天都快按英国时间生活了……

[Sai]

@lianghai 当年的Dango和Bangumi是两个极端，Bangumi的表单几乎没有任何说明（偶尔会有Bangumi娘提示两句），其实那些提示语我读过一次以后视觉上就会自动忽略了。

[lianghai]

@Sai 我又没成功即时睡觉……反倒真的看到了英国时间的人出现……
:P 确实会自动互略，但对于不强迫症会死星人来说，总会纠结于那些文字的（“不要再次把我当作一个新手啦！”）。而且 V2EX 这样一个其实很简明清晰的系统特别适合在这方面试试。

[lianghai]

ClouApp 的贴图出问题了，那今天就不发截图了。
今天打算早睡觉（……凌晨三点……），于是只尝试了一个点：导航栏的 metaphor。
修改已 push 到 GitHub，主要在 home-alt.html 里。效果非常可爱…… ＝v＝
不过我做完了才意识到为什么第一个图形那么眼熟（我本来想用这个自我旋转的符号代表“自己”），因为它是无比常见的代表“刷新”的 metaphor……看来没戏了，明天试试“u”来表示“你”好了……
而且这三个图标太小了，离得又近，易用性大概是个灾难。
暂时没想到什么更明了的方法来很好地指示自己的页面，明天再研究一下别的网站一般是怎么处理的（其实一般都是用头像吧，所以 V2EX 用用户名其实是最让用户熟悉的了，不过非文字方案还是值得尝试）。

[Kai]

话说这贴图是怎么了？

[lianghai]

突然想到，既然我一直计划 http://v2ex.com/member/[自己的用户名] 这个页面显示的应当是：自己发布的主题、自己参与的主题、自己收藏的主题与节点、自己关注的人。那设计 metaphor 的时候，“自己”似乎并不一定是中心词，中心词可以是“信息”。我突然想起以前 V2EX 的那组分别针对三种性别的默认头像了，又想起 Facebook 最喜欢用的有一撮翘起的头发的男孩剪影。图形 metaphor 真是个很有趣的事情。

不论是图标还是颜色，似乎都会比文字难懂一些，那么以“专家模式”为目标去设计它们应该也不错。新手模式下，可以用图标加文字：图标引出文字或图标衬托文字。

@Kai 不知……今天下午好像经历过一段时间的服务器不稳定，反正后来我试图发 Firefox 的那个教程贴图时才发现出问题了。似乎是 V2EX 和 http://picky-staging.appspot.com/ 之间的通信出了问题？

[lianghai]

在 Coda 和 Espresso 的对比中晕了两天，思维有点停滞……
于是今天的成果有点傻。
不过我发现这三对数据的对比很有意思，有一种阴阳平衡的感觉。

我决定在自己的页面上主要只显示这三对信息，而在他人的页面上才默认展开个人详细信息。

既然贴图暂时有问题，就直接贴 URL 了：http://cl.ly/3Puo

向 GitHub push 完毕。

[lianghai]

……居然故意阻止它转义都没成功……
是：cl.ly/3Puo

这个绿色有点诡异，得再调一调。不过，用绿色代表自己的这个源自上一版 PB2 主题色版的概念基本是确定了的。

[n2n3]

http://www.cl.ly/3Puo

[freefcw]

@livid

不小心又看到这个帖子了~~~
可以参考这个设计？

[lianghai]

@freefcw: 哇靠前两天看到那个 iOS app 的设计之后我就想起自己挖的这个坑了，良心不安……居然还被顶起来……求让这帖沉了吧……

[Livid]

一年半过去了，现在来看，依然觉得很有启发。

目前 PB3 的 mobile 版本的设计，对比度还可以再优化。

@lianghai 感谢你的作品。

[freefcw]

@lianghai 哪里，我觉得你这个设计虽然不少地方可以商榷，但是非常值得借鉴啊。。里面很多理念很具有启发性

[fanzeyi]

原来这帖子我还打酱油出现在截图过ww

[lianghai]

@freefcw @fanzeyi: 挖坑大王掩面奔过…… >_<:::