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

2010-11-20 03:04:26 +08:00
 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 如何？
9481 次点击
所在节点    设计
60 条回复
freefcw
2010-11-20 03:06:38 +08:00
恩，不错
不过我倒是觉得author应该比所在区域更重要一点
lianghai
2010-11-20 03:26:35 +08:00
@freefcw
今天我真切地感觉到了 Retina display 的威力——一切无感的文字排版放到它上面都好看，和普通屏幕真是天壤之别……
我仔细思考了一下楼主和节点这二者的问题，觉得还是得把节点放在最醒目的地方，而且得是能和主题一起*连贯阅读*的位置上（而且最好是开头），这样才能解决现在很多人不注意节点就随口回复的问题。而楼主名字，总感觉是个相当不重要的信息……只要确保需要查看的时候能方便地看到就好了。

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

在“某节点”这一话题下；
“某人”（楼主）、“某人”、“某人”……“某人”、以及于“某时刻”发表最新回复的“某人”参与了讨论；
讨论的主题为“帖子标题”。
shawiz
2010-11-20 03:41:55 +08:00
设计很美观。左边的已读/未读功能可能会误导用户，因为有点像滚动条 = =
vayn
2010-11-20 03:56:34 +08:00
那几个点可以用来表示回复数，1个点代表小于10回复，2个点代表小于30等等。反正回复计数已经被简化了么……
Sai
2010-11-20 04:15:18 +08:00
WP7 Metro UI灵魂附体
lianghai
2010-11-20 05:31:54 +08:00
@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
2010-11-20 09:20:31 +08:00
你这个还可以，但感觉现在的v2ex更高清些，你的大字体设计可能用在 240x320 界面更好 ：）
aligo
2010-11-20 09:24:38 +08:00
cool！LZ我可以用这个设计吗。。。
Banana_Co
2010-11-20 09:57:19 +08:00
右边的蓝条，首先想到的是Remember The milk
lianghai
2010-11-20 13:51:42 +08:00
@imsein 其实这个设想完全是在依赖 Retina display 对字体细节美的呈现，在 240×320 上就没有这种像印刷一样的细腻感啦～而且文字尺寸并不大，和 iOS 里 Safari 对地址栏输入的提示信息文本是一样大的，这样的信息密度比较舒适。

@aligo 哦这只是个草稿而已，欢迎利用它来做更好的设计！不过它在普通像素密度的屏幕（非 Retina Display）上，加上用微软雅黑，效果可能不会太好。
lianghai
2010-11-20 16:12:09 +08:00
@Banana_Co 啊，看来英雄所见略同～不过 RTM 的蓝条的“重量”要大得多，压抑了左侧的空间。另外，对 RTM 最深刻的印象就是他们中文页面图片中的悲惨字体。
zipaiwang
2010-11-20 18:00:39 +08:00
不要拿掉一个社区的头像元素 这是底线
lianghai
2010-11-20 18:07:50 +08:00
@zipaiwang V2EX 的核心价值不像人人等 SNS 一样在于用户的丰富个性信息，这里文字的意义更大。对于一个不提供自定义显示名称和自定义签名的简洁的系统来说，头像的存在与否不是底线——何况这个草稿只是一个极端的“试图”从 typography 下手的小众方案而已。
xiaoyao
2010-11-20 19:38:10 +08:00
这个UI看起来很WP7……
lianghai
2010-11-20 20:16:51 +08:00
又整了一个 /t（已加入收藏的）玩：
http://cl.ly/3KaL
目前的问题：
因为偷懒，所以没改行距就直接从上一张图来改了，现在这行距对移动设备来说稍大了一点；
每一层楼的上下 padding 太小，导致和高大的空行对比起来很古怪；
favorite/unfavorite 按钮和 sign out 按钮太紧，可能会有误操作。

用于 Retina display 的原始尺寸 mockup，在 cl.ly 的 3KEr
Livid
2010-11-20 20:46:14 +08:00
@lianghai 你下毒成功。。。
walker44
2010-11-20 23:47:22 +08:00
中毒了。
lianghai
2010-11-21 02:54:54 +08:00
一不小心就被认为是下毒了……热泪盈眶 @_@
Livid
2010-11-21 03:05:08 +08:00
@lianghai 为了这个设计，我会调整开发计划。
GordianZ
2010-11-21 03:12:46 +08:00
@lianghai 当初我也有一个针对移动页面的设计用的这种左边色条做提示的，结果我怎么也弄不好看，泪目……

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/4780

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX