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 条回复
Livid
2010-11-26 07:02:23 +08:00
@Elix 刚刚看完最新一期 Wired,半夜的咖啡和安静时刻。

最近对和 Condé Nast 有关的一切越来越着迷了。
Elix
2010-11-26 07:09:41 +08:00
@Livid 我最近一直坚持看完的杂志是《财经》和《第一财经周刊CBN Weekly》
现在已经不是半夜,是早上了。
lianghai
2010-11-26 07:34:00 +08:00
另外,这几天我在想一个常常会针对各种网站蹦出来的想法:
能不能在设置中提供一个“专家”选项。启用之后,界面的一切非必要的针对新手的信息全部消失,比如一些冗长的措词、提示信息等等。

@Elix

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

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

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

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

自我介绍的这个页面,当时我第一眼看到就惊了,心想要不然就是借鉴了 livid.cn,要不然就是世界上英雄所见略同了 :P 不过还是有一个拼写错误没有改过来:“Adobe Creative Suit 5”。
Livid
2010-11-26 07:42:18 +08:00
@lianghai 我也觉得很多提示看着就恶心,思索中。
Elix
2010-11-26 07:45:48 +08:00
@lianghai 好吧,我承认,我老了,我困了

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

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

关于我的About页面。。。不是借鉴,是彻彻底底的“抄袭”。我基本上连语气和语调都没变。
lianghai
2010-11-26 08:03:59 +08:00
@Livid 我最初出现“专家模式”这样一个想法是在当年体验 http://www.haodou.com/ 的前身的时候(当时似乎那是 @Sai 和 @titan 的项目呢),我在一些界面见到了特别详尽的针对表单每一项的说明,心想要是自己真的天天用这个网站,天天看到这些温柔的说明,得多可怕。(我有点陷入迷思了,说不定我是首先在 @Sai 的设计里看到“专家模式”的也说不准。)

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

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

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

睡觉了,这几天都快按英国时间生活了……
Sai
2010-11-26 08:14:26 +08:00
@lianghai 当年的Dango和Bangumi是两个极端,Bangumi的表单几乎没有任何说明(偶尔会有Bangumi娘提示两句),其实那些提示语我读过一次以后视觉上就会自动忽略了。
lianghai
2010-11-26 08:30:04 +08:00
@Sai 我又没成功即时睡觉……反倒真的看到了英国时间的人出现……
:P 确实会自动互略,但对于不强迫症会死星人来说,总会纠结于那些文字的(“不要再次把我当作一个新手啦!”)。而且 V2EX 这样一个其实很简明清晰的系统特别适合在这方面试试。
lianghai
2010-11-27 05:23:08 +08:00
ClouApp 的贴图出问题了,那今天就不发截图了。
今天打算早睡觉(……凌晨三点……),于是只尝试了一个点:导航栏的 metaphor。
修改已 push 到 GitHub,主要在 home-alt.html 里。效果非常可爱…… =v=
不过我做完了才意识到为什么第一个图形那么眼熟(我本来想用这个自我旋转的符号代表“自己”),因为它是无比常见的代表“刷新”的 metaphor……看来没戏了,明天试试“u”来表示“你”好了……
而且这三个图标太小了,离得又近,易用性大概是个灾难。
暂时没想到什么更明了的方法来很好地指示自己的页面,明天再研究一下别的网站一般是怎么处理的(其实一般都是用头像吧,所以 V2EX 用用户名其实是最让用户熟悉的了,不过非文字方案还是值得尝试)。
Kai
2010-11-27 05:31:20 +08:00
话说这贴图是怎么了?
lianghai
2010-11-27 05:43:22 +08:00
突然想到,既然我一直计划 http://v2ex.com/member/[自己的用户名] 这个页面显示的应当是:自己发布的主题、自己参与的主题、自己收藏的主题与节点、自己关注的人。那设计 metaphor 的时候,“自己”似乎并不一定是中心词,中心词可以是“信息”。我突然想起以前 V2EX 的那组分别针对三种性别的默认头像了,又想起 Facebook 最喜欢用的有一撮翘起的头发的男孩剪影。图形 metaphor 真是个很有趣的事情。

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

@Kai 不知……今天下午好像经历过一段时间的服务器不稳定,反正后来我试图发 Firefox 的那个教程贴图时才发现出问题了。似乎是 V2EX 和 http://picky-staging.appspot.com/ 之间的通信出了问题?
lianghai
2010-11-29 04:38:28 +08:00
在 Coda 和 Espresso 的对比中晕了两天,思维有点停滞……
于是今天的成果有点傻。
不过我发现这三对数据的对比很有意思,有一种阴阳平衡的感觉。

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

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

向 GitHub push 完毕。
lianghai
2010-11-29 04:42:03 +08:00
……居然故意阻止它转义都没成功……
是:cl.ly/3Puo

这个绿色有点诡异,得再调一调。不过,用绿色代表自己的这个源自上一版 PB2 主题色版的概念基本是确定了的。
n2n3
2010-11-29 04:58:53 +08:00
freefcw
2012-04-30 21:39:31 +08:00
@livid

不小心又看到这个帖子了~~~
可以参考这个设计?
lianghai
2012-04-30 22:18:12 +08:00
@freefcw: 哇靠前两天看到那个 iOS app 的设计之后我就想起自己挖的这个坑了,良心不安……居然还被顶起来……求让这帖沉了吧……
Livid
2012-05-01 00:11:34 +08:00
一年半过去了,现在来看,依然觉得很有启发。

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

@lianghai 感谢你的作品。
freefcw
2012-05-01 01:59:38 +08:00
@lianghai 哪里,我觉得你这个设计虽然不少地方可以商榷,但是非常值得借鉴啊。。里面很多理念很具有启发性
fanzeyi
2012-05-01 02:23:04 +08:00
原来这帖子我还打酱油出现在截图过ww
lianghai
2012-05-01 02:33:25 +08:00
@freefcw @fanzeyi: 挖坑大王掩面奔过…… >_<:::

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

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

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

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

© 2021 V2EX