这是一个创建于 5124 天前的主题，其中的信息可能已经有所发展或是发生改变。
看到 @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 如何？
这些天开始用 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 如何？
 |
1
freefcw 2010-11-20 03:06:38 +08:00
恩，不错
不过我倒是觉得author应该比所在区域更重要一点 |
 |
2
lianghai OP @freefcw
今天我真切地感觉到了 Retina display 的威力——一切无感的文字排版放到它上面都好看，和普通屏幕真是天壤之别…… 我仔细思考了一下楼主和节点这二者的问题，觉得还是得把节点放在最醒目的地方，而且得是能和主题一起*连贯阅读*的位置上（而且最好是开头），这样才能解决现在很多人不注意节点就随口回复的问题。而楼主名字，总感觉是个相当不重要的信息……只要确保需要查看的时候能方便地看到就好了。 对了，对于每一条帖子的展示，我是以这个逻辑进行的（这和 V2EX 现在的思路不太一样）： 在“某节点”这一话题下； “某人”（楼主）、“某人”、“某人”……“某人”、以及于“某时刻”发表最新回复的“某人”参与了讨论； 讨论的主题为“帖子标题”。 |
 |
3
shawiz 2010-11-20 03:41:55 +08:00
设计很美观。左边的已读/未读功能可能会误导用户，因为有点像滚动条 = =
|
 |
4
vayn 2010-11-20 03:56:34 +08:00 via Android
那几个点可以用来表示回复数，1个点代表小于10回复，2个点代表小于30等等。反正回复计数已经被简化了么……
|
 |
5
Sai 2010-11-20 04:15:18 +08:00
WP7 Metro UI灵魂附体
|
|
6
lianghai OP @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…… |
 |
7
imsein 2010-11-20 09:20:31 +08:00 via iPod
你这个还可以，但感觉现在的v2ex更高清些，你的大字体设计可能用在 240x320 界面更好 ：）
|
 |
8
aligo 2010-11-20 09:24:38 +08:00
cool！LZ我可以用这个设计吗。。。
|
 |
9
Banana_Co 2010-11-20 09:57:19 +08:00 via Android
右边的蓝条，首先想到的是Remember The milk
|
|
10
lianghai OP |
|
11
lianghai OP @Banana_Co 啊，看来英雄所见略同～不过 RTM 的蓝条的“重量”要大得多，压抑了左侧的空间。另外，对 RTM 最深刻的印象就是他们中文页面图片中的悲惨字体。
|
 |
12
zipaiwang 2010-11-20 18:00:39 +08:00
不要拿掉一个社区的头像元素 这是底线
|
|
13
lianghai OP @zipaiwang V2EX 的核心价值不像人人等 SNS 一样在于用户的丰富个性信息，这里文字的意义更大。对于一个不提供自定义显示名称和自定义签名的简洁的系统来说，头像的存在与否不是底线——何况这个草稿只是一个极端的“试图”从 typography 下手的小众方案而已。
|
 |
14
xiaoyao 2010-11-20 19:38:10 +08:00
这个UI看起来很WP7……
|
|
15
lianghai OP 又整了一个 /t（已加入收藏的）玩：
http://cl.ly/3KaL 目前的问题： 因为偷懒，所以没改行距就直接从上一张图来改了，现在这行距对移动设备来说稍大了一点； 每一层楼的上下 padding 太小，导致和高大的空行对比起来很古怪； favorite/unfavorite 按钮和 sign out 按钮太紧，可能会有误操作。 用于 Retina display 的原始尺寸 mockup，在 cl.ly 的 3KEr |
 |
17
walker44 2010-11-20 23:47:22 +08:00 via iPad
中毒了。
|
|
21
lianghai OP |
|
22
lianghai OP 今天被 Photoshop 的排版能力不足麻烦死了，InDesign 又不能那么方便地调整字体抗锯齿风格，而且不好精确到像素。
这种简单的 mockup 用 Photoshop 真不合适——明天试试直接用 HTML+CSS 做 mockup…… =。= 下一步试试首页的页脚和 /member/* |
|
23
lianghai OP 这是在两个平台上对最新结果截图的对比：
http://cl.ly/3Kn7 原始尺寸 iPhone 截图见 cl.ly 的 3LYb 全部成果已经 push 到了： https://github.com/lianghai/v2type 感觉在首页显示一堆节点名称意义不大，正在考虑是否要把快速发帖这一想法加入 /home 这样的风格果然还是更适合陈列信息而不是提供交互功能——为搜索栏这样的地方可能还是得加上一些图标，不能用纯文字。 试了一把 SVG～ 今天完成了基本的页面结构……接下来应该快一些了…… iPhone 4 的 Retina display 带来的像素密度问题真是让人晕头转向，怪不得至今都还有那么多应用没有为 Retina display 做优化。 :P |
 |
25
Los 2010-11-22 07:49:41 +08:00
相当不错
|
 |
26
napoleonu 2010-11-22 08:03:48 +08:00
相当不错哈
|
|
27
lianghai OP 汇报今日进展：
周末太兴奋了，困加头疼一天…… 强迫症地从 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 |
|
28
Los 2010-11-23 04:40:41 +08:00
加油，这将是一个经典
|
 |
30
diamondtin 2010-11-23 09:42:04 +08:00
越狱后可以在iphone4里面将STHeiti替换为“Hiragino Sans GB”的，效果就可以接近mockup了。BTW: Hiragino Sans GB的w6粗体真的很粗 :D
|
|
31
lianghai OP @diamondtin 是的...只是这样的解决方案是不现实的 >_< 另外我觉得只有 W6 这样能和西文粗体黑度一致的中文粗体才是有意义的嘛...
|
|
32
lianghai OP 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 睡觉去了～ |
|
33
lianghai OP 我又来盖楼了……
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 里确实找到了它…… |
 |
34
Elix 2010-11-26 06:12:51 +08:00
我还是比较喜欢黑色版本的。
个人不喜欢过多的颜色(不包括各种灰度)和字体，这估计是平面设计的观念根深蒂固的原因。 |
|
35
lianghai OP @Elix
其实我在这个设计尝试中也只用了一个字体组合（Helvetica Neue + Hiragino Sans GB），两种字号，以及两种磅重（常规和粗体），应该在文字上还算比较简单了。只是为了在最小的空间上让信息的功能更加明确，觉得色彩已经是最好的解决方案了。 我很想知道，是什么“平面设计的观念”使您“不喜欢过多的颜色（不包括各种灰度）和字体”呢？ 另外，非常期待您能从专业设计师的角度为这一组设计尝试提出一些建议。 |
|
36
lianghai OP @Elix 对了，顺便说一下，这个 [1] 页面正文的第三段前两行各有一个严重而且显眼的错误，相信以您的洞察力应该很容易改正过来 :)
[1] http://www.elixzhang.com/blog/about-2 |
 |
37
Livid MOD Very exciting.
|
|
38
Elix 2010-11-26 06:55:25 +08:00
@lianghai 请原谅我的表述不够严谨，严格的来说，应该是在“平面设计”中的“版式设计”这个范畴里，讨论关于字体和颜色这个话题。
在传统的纸质媒体上，如果是为了便于阅读，应该尽量减少所用的字体和字体的颜色。这样有利于突出所要表达的“逻辑”。 其实也就是所谓的“重点”。因为太多的字体的大小会造成阅读逻辑的混乱。所以我个人一直非常在意在设计中使用不超过3种字体以及谨慎地使用变体(斜体和加粗)。 回到上面的两个设计中来： 第一个黄色的版本，节点，标题，发贴者，内容，链接，各自使用了近似并且都很突出的颜色和字体。眼球一下子不容易抓住重点。 相比之下，黑色的版本强化了标题(加粗和黑色)，弱化了发贴者，节点等(灰色)视觉上比较容易找到重点。 非常惭愧的是，我不做设计已经快6年了。在这里说设计未免有点站着说话不腰疼的架势。 惭愧惭愧 |
|
40
Elix 2010-11-26 07:01:13 +08:00
@lianghai 关于自己的这个页面，我抄袭了Livid很久之前的自我介绍。。。诶。。请原谅一个老人家的懒惰。感谢提醒，已经改正。
|
|
41
Livid MOD |
|
43
lianghai OP 另外，这几天我在想一个常常会针对各种网站蹦出来的想法：
能不能在设置中提供一个“专家”选项。启用之后，界面的一切非必要的针对新手的信息全部消失，比如一些冗长的措词、提示信息等等。 @Elix “黑色的版本”指的是顶楼和 23 楼出现的截图里的那个吗？哦其实所谓“黄色的版本”是已标记为“收藏”的主题（此时用页首的一抹黄色来把主题页面鲜明地特殊化出来，平时它是浅灰色的），而“黑色的版本”是首页的最新主题列表，这两个页面因为功能的迥异而有很不同的考量： 最新主题列表中最重要的信息是主题的标题内容，其他一切从简（不过节点名称不能太弱化，因为从 V2EX 这几个月的运行能明显感觉到节点不够醒目是个问题）； 而主题页面（包括 Mentions 页面），我认为最重要的信息是“谁说了什么”，所以一定要把每层楼作者的用户名以及互相 mention 的标记凸显出来。不过这个页面的页首部分确实没有优化好，因为顶楼的信息比较繁杂，我会考虑是不是要把楼主用户名的蓝色去掉（不过其实在非收藏状态下这个部分的混乱并不明显），但也想让整个主题内每层楼的蓝色粗体用户名保持连贯。 你对那片黄色区域的感受确实非常准确，我老看老看就麻木了，现在看来它的混乱是很明显的。 嗯，我在版式设计方面的看法和你是一致的。不过我觉得西文中使用 italic 是非常重要而且对阅读友好的手段，但中文确实基本不能使用那种所谓的斜体。而字体数量的事情，我觉得还是和具体情况关系很大的，有时一个 typeface family 就能让版面无比复杂和丰富，而有的多种字体搭配在一起也能让一个信息确实很复杂的内容很易读。 自我介绍的这个页面，当时我第一眼看到就惊了，心想要不然就是借鉴了 livid.cn，要不然就是世界上英雄所见略同了 :P 不过还是有一个拼写错误没有改过来：“Adobe Creative Suit 5”。 |
|
45
Elix 2010-11-26 07:45:48 +08:00
@lianghai 好吧，我承认，我老了，我困了
我刚才说的黄色版本，是这个 http://cl.ly/3NOy 黑色的版本，是这个 http://cl.ly/3Nqb 关于V2EX注重是是“说了什么”还是“谁说了什么”，我想这个问题只有 @Livid 自己能够回答。我们没办法越俎代庖。版式的设计，无论在纸质的时代还是在数字化的时代，应该有某些原理是相通的。不过很可惜，现在已经很少有人会去思考这些问题了 关于我的About页面。。。不是借鉴，是彻彻底底的“抄袭”。我基本上连语气和语调都没变。 |
|
46
lianghai OP @Livid 我最初出现“专家模式”这样一个想法是在当年体验 http://www.haodou.com/ 的前身的时候（当时似乎那是 @Sai 和 @titan 的项目呢），我在一些界面见到了特别详尽的针对表单每一项的说明，心想要是自己真的天天用这个网站，天天看到这些温柔的说明，得多可怕。（我有点陷入迷思了，说不定我是首先在 @Sai 的设计里看到“专家模式”的也说不准。）
@Elix 哈，很多人都是，用 Adobe CS 用六七年了仍然没有注意到“suite”和“suit”的区别。这是个很有意思的集体迷思。 :D 作为用户，通过各种方式向 @Livid 反馈我们对 PB2 以及 V2EX 的感受是我们义不容辞的重担，包括这个最初纯粹是自娱自乐的设计尝试。让 @Livid 一个人构思所有的用户体验多没意思啊，我们要用用户反馈的信息淹没他。展示出无限可能。 版式设计 / typography 这事，在 V2EX 还是有几位朋友很热衷于此的。包括我最近开始频繁上 Twitter，感觉自己时间线里绝大多数的信息也都是 typography 相关，很有意思。 睡觉了，这几天都快按英国时间生活了…… |
|
47
Sai 2010-11-26 08:14:26 +08:00
@lianghai 当年的Dango和Bangumi是两个极端，Bangumi的表单几乎没有任何说明（偶尔会有Bangumi娘提示两句），其实那些提示语我读过一次以后视觉上就会自动忽略了。
|
|
48
lianghai OP @Sai 我又没成功即时睡觉……反倒真的看到了英国时间的人出现……
:P 确实会自动互略，但对于不强迫症会死星人来说，总会纠结于那些文字的（“不要再次把我当作一个新手啦！”）。而且 V2EX 这样一个其实很简明清晰的系统特别适合在这方面试试。 |
|
49
lianghai OP ClouApp 的贴图出问题了，那今天就不发截图了。
今天打算早睡觉（……凌晨三点……），于是只尝试了一个点：导航栏的 metaphor。 修改已 push 到 GitHub，主要在 home-alt.html 里。效果非常可爱…… ＝v＝ 不过我做完了才意识到为什么第一个图形那么眼熟（我本来想用这个自我旋转的符号代表“自己”），因为它是无比常见的代表“刷新”的 metaphor……看来没戏了，明天试试“u”来表示“你”好了…… 而且这三个图标太小了，离得又近，易用性大概是个灾难。 暂时没想到什么更明了的方法来很好地指示自己的页面，明天再研究一下别的网站一般是怎么处理的（其实一般都是用头像吧，所以 V2EX 用用户名其实是最让用户熟悉的了，不过非文字方案还是值得尝试）。 |
 |
50
Kai MOD 话说这贴图是怎么了？
|
|
51
lianghai OP 突然想到，既然我一直计划 http://v2ex.com/member/[自己的用户名] 这个页面显示的应当是：自己发布的主题、自己参与的主题、自己收藏的主题与节点、自己关注的人。那设计 metaphor 的时候，“自己”似乎并不一定是中心词，中心词可以是“信息”。我突然想起以前 V2EX 的那组分别针对三种性别的默认头像了，又想起 Facebook 最喜欢用的有一撮翘起的头发的男孩剪影。图形 metaphor 真是个很有趣的事情。
不论是图标还是颜色，似乎都会比文字难懂一些，那么以“专家模式”为目标去设计它们应该也不错。新手模式下，可以用图标加文字：图标引出文字或图标衬托文字。 @Kai 不知……今天下午好像经历过一段时间的服务器不稳定，反正后来我试图发 Firefox 的那个教程贴图时才发现出问题了。似乎是 V2EX 和 http://picky-staging.appspot.com/ 之间的通信出了问题？ |
|
52
lianghai OP 在 Coda 和 Espresso 的对比中晕了两天，思维有点停滞……
于是今天的成果有点傻。 不过我发现这三对数据的对比很有意思，有一种阴阳平衡的感觉。 我决定在自己的页面上主要只显示这三对信息，而在他人的页面上才默认展开个人详细信息。 既然贴图暂时有问题，就直接贴 URL 了：http://cl.ly/3Puo 向 GitHub push 完毕。 |
|
53
lianghai OP |
 |
54
n2n3 2010-11-29 04:58:53 +08:00
|
|
56
lianghai OP @freefcw: 哇靠前两天看到那个 iOS app 的设计之后我就想起自己挖的这个坑了，良心不安……居然还被顶起来……求让这帖沉了吧……
|
|
57
Livid MOD |
 |
59
fanzeyi 2012-05-01 02:23:04 +08:00
原来这帖子我还打酱油出现在截图过ww
|
Select Language