#1 - 2013-3-6 08:26
小寒 (Idle singer of an empty day)

还在施工中……
还是说做个Dark Version更好看呢?有天试试看吧。
如果有意见的话也请提出来(bgm24)
#2 - 2013-3-6 08:41
三次元的icon是什么我很好奇www 怎么看都像个大便icon真抱歉bgm38

个人觉得on air的label和在看/看过的按钮样式一样稍微有点怪因为功能不一样。和左边的消息提示label样式一样还可以理解。其他感觉都很棒 (bgm35)

嘛另外书籍icon比别的存在感强烈一点所以虽然一样大但看起来更大,不过是个没所谓的小细节。
#2-1 - 2013-3-6 08:45
小寒
没错那就是一坨翔(bgm38)(bgm38)因为一时间找不到合适的按钮了(bgm38)
嗯我也注意到了,有“新动画未看”“新提醒未读”这种tip和status indicator应该要不一样才对,于是要另外想出一种indicator样式来……
#2-2 - 2013-3-6 08:49
Hiyori
小寒 说: 没错那就是一坨翔因为一时间找不到合适的按钮了
嗯我也注意到了,有“新动画未看”“新提醒未读”这种tip和status indicator应该要不一样才对,于是要另外想出一种indicator样式来……
把凹进去的效果变成凸出来就好

对了另外注意到一点,左栏的分类(进度管理/社交网络)和分类内的项的左对齐位置是一样的感觉有点违和感。像是Finder之类的树形视图的话都是把分类内项目对齐到那个显示收缩的小三角的右边的,用来显示一层套一层。小寒这个对齐是有原因的吗?
#2-3 - 2013-3-6 08:53
小寒
Hiyori 说: 把凹进去的效果变成凸出来就好

对了另外注意到一点,左栏的分类(进度管理/社交网络)和分类内的项的左对齐位置是一样的感觉有点违和感。像是Finder之类的树形视图的话都是把分类内项目对齐到那个显示收缩...
木有原因(bgm38)因为要是做成树形视图的话那么大的字就摆不下那个小圆形tip了(bgm38)
要么就去掉倒三角好了?不收起来也无所谓。
唔喵,现在在纠结要不要做dark版本。那个words阅读器就是暗色的主界面好漂亮www
#2-4 - 2013-3-6 09:54
Hiyori
小寒 说: 木有原因因为要是做成树形视图的话那么大的字就摆不下那个小圆形tip了
要么就去掉倒三角好了?不收起来也无所谓。
唔喵,现在在纠结要不要做dark版本。那个words阅读器就是暗色的主界面好漂亮www
我也觉得去掉就行,反正总共也没多少个项不会有人收起来的。
先把light版做完了再试试dark版吧,不然样式什么的好麻烦。
#2-5 - 2013-3-6 09:57
小寒
Hiyori 说: 我也觉得去掉就行,反正总共也没多少个项不会有人收起来的。
先把light版做完了再试试dark版吧,不然样式什么的好麻烦。
嗯,我也是这么想滴
为了consistency还要先做一套UI Kit出来试试看效果……
#2-6 - 2013-3-6 12:28
林卯
小寒 说: 没错那就是一坨翔因为一时间找不到合适的按钮了
嗯我也注意到了,有“新动画未看”“新提醒未读”这种tip和status indicator应该要不一样才对,于是要另外想出一种indicator样式来……
关于三次元我已经想到了合适的按钮图形,请等我做出来…
#3 - 2013-3-6 08:54
大好~支持电波提醒么?
#3-1 - 2013-3-6 08:55
小寒
原本在UI初期想要在程序内找个地方给提醒的,后来一想这是Mac版的UI,干脆直接用notification center算了
#3-2 - 2013-3-6 09:41
粘土火星
小寒 说: 原本在UI初期想要在程序内找个地方给提醒的,后来一想这是Mac版的UI,干脆直接用notification center算了
最好两种都要有。。。
#3-3 - 2013-3-6 09:43
小寒
粘土火星 说: 最好两种都要有。。。
那么就在用户头像上加个小小的badge好了www
#4 - 2013-3-6 09:24
(約束の言葉 大好きな花 ポッケの宝物~? ...)
讚!
#5 - 2013-3-6 09:33
(Hibernate Mode ON)
必然把蓝色换成粉的呀(bgm38)
#5-1 - 2013-3-6 09:34
小寒
试过换成粉的了,不好看。要psd来试试么?
#5-2 - 2013-3-6 09:35
滾滾洗衣君
外粉里黑。
#5-3 - 2013-3-6 09:36
小寒
滾滾洗衣君 说: 外粉里黑。
所以说做成全黑背景,用粉色做scent color就对了?貌似有点意思
#5-4 - 2013-3-6 09:38
滾滾洗衣君
小寒 说: 所以说做成全黑背景,用粉色做scent color就对了?貌似有点意思
表太認真(bgm88)
#5-5 - 2013-3-6 09:40
小寒
滾滾洗衣君 说: 表太認真。
反正我原来也想做个dark version来着,而且貌似dark看着更舒服些(bgm24)
#5-6 - 2013-3-6 09:58
Hiyori
小寒 说: 试过换成粉的了,不好看。要psd来试试么?
给我来份psd试试?
最近在帮别人做一个管理婚礼的webapp所以搞了好多粉嫩颜色的mock
#5-7 - 2013-3-6 10:04
小寒
Hiyori 说: 给我来份psd试试?
最近在帮别人做一个管理婚礼的webapp所以搞了好多粉嫩颜色的mock
哦哦!
http://d.pr/f/cDL1
中文字体是Hiragino Sans(Mac应该有预装)西文字体是Gotham Narrow
#5-8 - 2013-3-6 12:54
Hiyori
小寒 说: 哦哦!
http://d.pr/f/cDL1
中文字体是Hiragino Sans(Mac应该有预装)西文字体是Gotham Narrow

这样感觉如何?我挺喜欢粉色的=v=
topbar稍微加了点纹理,可能要图片100%才能看得出来
话说我觉得badge/label的渐变倒过来比较好看耶...
#5-9 - 2013-3-6 20:34
林卯
小寒 说: 哦哦!
http://d.pr/f/cDL1
中文字体是Hiragino Sans(Mac应该有预装)西文字体是Gotham Narrow
我发现我这里Droplr被墙了…
#5-10 - 2013-3-7 17:26
小寒
Hiyori 说:
这样感觉如何?我挺喜欢粉色的=v=
topbar稍微加了点纹理,可能要图片100%才能看得出来
话说我觉得badge/label的渐变倒过来比较好看耶...
我还是去先做套UI Kit再说吧……
#5-11 - 2013-3-7 20:30
Dodo
Hiyori 说:
这样感觉如何?我挺喜欢粉色的=v=
topbar稍微加了点纹理,可能要图片100%才能看得出来
话说我觉得badge/label的渐变倒过来比较好看耶...
这样挺不错的呀ww
虽然我不喜欢粉色但是看起来也没那么差啦
#5-12 - 2013-3-7 23:41
小寒
Dodo 说: 这样挺不错的呀ww
虽然我不喜欢粉色但是看起来也没那么差啦
喂喂不是嘟嘟要粉色的么!!!
#5-13 - 2013-3-7 23:57
Dodo
小寒 说: 喂喂不是嘟嘟要粉色的么!!!
因为bgm就是粉的呀
#5-14 - 2013-3-8 00:32
小寒
Dodo 说: 因为bgm就是粉的呀
黑底粉和黑底蓝都很不错
#5-15 - 2013-3-8 01:27
Hiyori
Dodo 说: 这样挺不错的呀ww
虽然我不喜欢粉色但是看起来也没那么差啦
我也不喜欢粉色ww
但是bgm普遍用的粉色严格意义上来讲不是粉色而是淡红色呢,很洋气的颜色所以基本做什么都不难看。
#6 - 2013-3-6 09:40
(Save you from anything)
为什么是蓝色为什么是蓝色为什么是蓝色为什么是蓝色为什么是蓝色为什么是蓝色为什么是蓝色为什么是蓝色为什么是蓝色
#6-1 - 2013-3-6 09:44
小寒
粉色太明艳了以我的功力控制不住(bgm38)
#6-2 - 2013-3-6 09:49
粘土火星
小寒 说: 粉色太明艳了以我的功力控制不住
中性的灰色多简单,而且符合Mac一贯的风格。。。。。

现在一是比例有问题,我这个破显示器还过饱和(貌似)。。。。晚上回家用Retina看看www
#6-3 - 2013-3-6 09:53
小寒
粘土火星 说: 中性的灰色多简单,而且符合Mac一贯的风格。。。。。

现在一是比例有问题,我这个破显示器还过饱和(貌似)。。。。晚上回家用Retina看看www
果然还是要回归灰色top bar么(bgm38)
比例有问题说的是边栏和内容框?边栏的字是故意调大的为了好点(bgm38)
#6-4 - 2013-3-6 09:57
粘土火星
小寒 说: 果然还是要回归灰色top bar么
比例有问题说的是边栏和内容框?边栏的字是故意调大的为了好点
比例问题最明显的不就是一大坨蓝的吗w

至于字感觉不要刻意加大啊。。。
#6-5 - 2013-3-6 10:03
小寒
粘土火星 说: 比例问题最明显的不就是一大坨蓝的吗w

至于字感觉不要刻意加大啊。。。
其实那一大坨蓝色后面还要加点按钮上去就感觉不那么别扭了(bgm38)
字的话会调小的谢谢提醒w
#6-6 - 2013-3-6 10:38
粘土火星
小寒 说: 其实那一大坨蓝色后面还要加点按钮上去就感觉不那么别扭了
字的话会调小的谢谢提醒w
仔细看了一下这个字号应该是父标题级别的wwww,现在正好反过来的感觉(bgm38)

而且本来文字导航观感不如图标,但现在醒目度也是反过来的。。。囧rz
#6-7 - 2013-3-6 10:45
小寒
粘土火星 说: 仔细看了一下这个字号应该是父标题级别的wwww,现在正好反过来的感觉

而且本来文字导航观感不如图标,但现在醒目度也是反过来的。。。囧rz
那是排版的逻辑吧?怎么想都觉得字号大小反过来很别扭,最多做成同大小的好了
#6-8 - 2013-3-6 12:30
林卯
小寒 说: 粉色太明艳了以我的功力控制不住
很简单,用粉红色金属。你找下铋单质的照片。
#6-9 - 2013-3-6 18:30
upsuper
小寒 说: 粉色太明艳了以我的功力控制不住
我也支持用粉色的说~
#6-10 - 2013-3-7 17:26
小寒
upsuper 说: 我也支持用粉色的说~
行了决定就是黑底粉了
#6-11 - 2013-3-7 17:31
粘土火星
小寒 说: 行了决定就是黑底粉了
恩,颜色还好,不过字体。。。冬青虽然我是非常喜欢ww,但有个缺点是在某些字号下加粗非常难认,建议标题看看能不能换一种。。。

Google Reader也这样让我很火大。。。
#6-12 - 2013-3-7 17:33
小寒
粘土火星 说: 恩,颜色还好,不过字体。。。冬青虽然我是非常喜欢ww,但有个缺点是在某些字号下加粗非常难认,建议标题看看能不能换一种。。。

Google Reader也这样让我很火大。。。
我宁愿用大号也不愿意用加粗就是因为冬青用W6很难看,除非信黑,可是信黑自然我是买不起的。
日文的话试试用小塚?
#6-13 - 2013-3-7 17:33
粘土火星
小寒 说: 我宁愿用大号也不愿意用加粗就是因为冬青用W6很难看,除非信黑,可是信黑自然我是买不起的。
日文的话试试用小塚?
老的华文细黑呢???
#6-14 - 2013-3-7 17:35
小寒
粘土火星 说: 老的华文细黑呢???
个人喜好,不喜欢喇叭口。
#6-15 - 2013-3-7 17:47
粘土火星
小寒 说: 个人喜好,不喜欢喇叭口。
总之少年慢慢加油吧wwwwww
话说这几天正在看obj-c,感觉真的是奇葩www
#6-16 - 2013-3-7 20:02
林卯
小寒 说: 行了决定就是黑底粉了
呜,我提议的铋质感没有接受…

字体不用系统默认,用图片吗?
#6-17 - 2013-3-7 23:38
小寒
林卯 说: 呜,我提议的铋质感没有接受…

字体不用系统默认,用图片吗?
冬青从10.6就已经预装了,如果是西文的话要么内嵌进去要么还是用Lucida Grande算了,反正只是个UI
#7 - 2013-3-8 12:45
(天天日富美)
记得dock要黑白的
#8 - 2013-3-12 00:05
(Idle singer of an empty day)
第一版UI Kit放出
#8-1 - 2013-3-12 00:24
林卯
看起来很好。
#8-2 - 2013-3-12 00:25
小寒
林卯 说: 看起来很好。
咨询了一下设计湿喷油,说质感和光影还需要改善……
自己也觉得好像哪里有问题,就是看着没那种高端洋气上档次的赶脚……
#8-3 - 2013-3-12 00:27
林卯
小寒 说: 咨询了一下设计湿喷油,说质感和光影还需要改善……
进度条上的圆圈顶上少了1像素的样子。
我先看的框架,质感和光影以后再考虑。
想高端洋气上档次是可以,但做出来和bgm.tv未必贴切…
#8-4 - 2013-3-12 00:29
小寒
林卯 说: 进度条上的圆圈顶上少了1像素的样子。
我先看的框架,质感和光影以后再考虑。
嗯,那个地方原来加了高光,缩了之后就缩不见了而我又懒得重做一个
从iTunes借来的灵感,把点格子化为时间线的概念看起来很好吃。

那个on air的状态指示上加了0.7%的Gaussian noise,其他都没加。果然以后还是得用vector mask上noise啊,不然有点脏。
#8-5 - 2013-3-12 00:59
林卯
小寒 说: 嗯,那个地方原来加了高光,缩了之后就缩不见了而我又懒得重做一个
从iTunes借来的灵感,把点格子化为时间线的概念看起来很好吃。

那个on air的状态指示上加了0.7%的Gaussian nois...
Fireworks里有个杂点功能,感觉像是你所说的高斯噪声。如果需要用杂点处理出磨砂化效果又想不脏,这需要多层次地加——说来话长,不如参考现实物体来得容易。
关于高端”按钮,给个参考:
#8-6 - 2013-3-12 01:59
小寒
林卯 说: Fireworks里有个杂点功能,感觉像是你所说的高斯噪声。如果需要用杂点处理出磨砂化效果又想不脏,这需要多层次地加——说来话长,不如参考现实物体来得容易。
关于“高端”按钮,给个参考:
不行了笑抽了
#8-7 - 2013-3-12 11:32
滾滾洗衣君
林卯 说: Fireworks里有个杂点功能,感觉像是你所说的高斯噪声。如果需要用杂点处理出磨砂化效果又想不脏,这需要多层次地加——说来话长,不如参考现实物体来得容易。
关于“高端”按钮,给个参考:
最後一個棒!(bgm38)
#8-8 - 2013-3-12 14:06
粘土火星
好评,布局有点疑问就是左下角那里到底是干什么的。。。。
连badge都是圆角矩形也有点不习惯,
还有那几个诡异的前进后退播放按钮也wwwww
#8-9 - 2013-3-12 14:10
小寒
粘土火星 说: 好评,布局有点疑问就是左下角那里到底是干什么的。。。。
连badge都是圆角矩形也有点不习惯,
还有那几个诡异的前进后退播放按钮也wwwww
左下角那个是讨论条目的入口。
关于那堆前进后退按钮么,可以用来做界面内导航用……另外,由于将点格子化为timeline,如果窗口内一条timeline不够长摆下全部章节的话,就要用前进后退功能了……
#8-10 - 2013-3-12 18:29
林卯
小寒 说: 左下角那个是讨论条目的入口。
关于那堆前进后退按钮么,可以用来做界面内导航用……另外,由于将点格子化为timeline,如果窗口内一条timeline不够长摆下全部章节的话,就要用前进后退功能了……
对了,头像框固定用圆形切割不太好,不一定适合各种头像,最好头像框形状是可选的。
时间线长度可设计成自适应窗口;
或者蛇形,长出窗口外的就使用上下滚动条浏览,可使用滚轮减少鼠标操作。
#8-11 - 2013-3-12 18:52
upsuper
林卯 说: 对了,头像框固定用圆形切割不太好,不一定适合各种头像,最好头像框形状是可选的。
时间线长度可设计成自适应窗口,或者蛇形,长出窗口外的就使用上下滚动条浏览,可使用滚轮减小鼠标操作。
圆形头像确实有的时候会囧,比如楼上就是一例(
我觉得用滚轮什么的不太容易被普通用户接受,还是前后就好了,或者如果看过的章节不重要的话可以把几个连续的状态相同的压缩在一起什么的然后点一下弹开来?
#8-12 - 2013-3-12 23:03
小寒
林卯 说: 对了,头像框固定用圆形切割不太好,不一定适合各种头像,最好头像框形状是可选的。
时间线长度可设计成自适应窗口;
或者蛇形,长出窗口外的就使用上下滚动条浏览,可使用滚轮减少鼠标操作。
自适应长度时间线(bgm84)要是像柯南那样bgm有100集那不是该挤死了(bgm38)
当初也考虑过滚轮。但是用户不会觉得本来是纵向滑动的滚轮用来做横向滑动很有违和感嘛?而且这种东西大概是没有视觉提示的,所以又要专门提示用户“这里可以滑动滚轮”,比前进后退按钮不方便吧。
#8-13 - 2013-3-12 23:10
林卯
小寒 说: 自适应长度时间线要是像柯南那样bgm有100集那不是该挤死了
当初也考虑过滚轮。但是用户不会觉得本来是纵向滑动的滚轮用来做横向滑动很有违和感嘛?而且这种东西大概是没有视觉提示的,所以又要专门提示用户“...
蛇形就是纵向的喽~
1→→→→→→10
       ↓
20←←←←←11

21→→→→→30
---(向下滚动)---↓
#8-14 - 2013-3-12 23:54
小寒
林卯 说: 蛇形就是纵向的喽~
1→→→→→→10
       ↓
20←←←←←11

21→→→→→30
---(向下滚动)---↓
为什么要做成蛇形?用户看到时间线不完全显示的话自然会想是窗口不够长,所以会想“横向滚动就能看到隐藏的部分”了吧。我觉得蛇形滚动虽然neat,但是不符合用户的预想。
#8-15 - 2013-3-13 00:03
林卯
小寒 说: 为什么要做成蛇形?用户看到时间线不完全显示的话自然会想是窗口不够长,所以会想“横向滚动就能看到隐藏的部分”了吧。我觉得蛇形滚动虽然neat,但是不符合用户的预想。
呃,不是蛇形滚动,是蛇形的时间线(窗口内可排3行,每行包含的集数按窗口宽度来),如果还是长到窗口外,则可上下滚动…
时间线不完全显示使用的是渐隐,且光标驻留时间线400毫秒后显现纵向滑动条来提示。

自适应长度时间线的每集之间有个最短距离,如果窗口宽度不够则按上面的蛇形来拐弯…

——好像2个方案合并了?
#8-16 - 2013-3-13 00:10
小寒
林卯 说: 呃,不是蛇形滚动,是蛇形的时间线(窗口内可排3行,每行包含的集数按窗口宽度来),如果还是长到窗口外,则可上下滚动…

自适应长度时间线的每集之间有个最短距离,如果窗口宽度不够则按上面的蛇形来拐弯…

...
我知道你说的意思,就是比如有30集,自适应后一条时间线可显示10集就会纵向滚动三次这样。但是我说的是用户不会预计到这里该上下滚,因为他会觉得时间线不够长显示的话横向活动就能看到(我觉得一般人都会这么想的,除非给提示)
#8-17 - 2013-3-13 01:08
林卯
小寒 说: 我知道你说的意思,就是比如有30集,自适应后一条时间线可显示10集就会纵向滚动三次这样。但是我说的是用户不会预计到这里该上下滚,因为他会觉得时间线不够长显示的话横向活动就能看到(我觉得一般人都会这么想...
=_,= 确定?

即使做成这样,用户还是不会预计到这里该上下滚?
#8-18 - 2013-3-13 01:28
小寒
林卯 说: =_,= 确定?

即使做成这样,用户还是不会预计到这里该上下滚?
我要把时间线像音乐软件的播放进度条那样放在窗口底部一长条……
我也不是说用户看不到,而是蛇形时间线不符合用户预计,虽然通过提示用户也会明白可以这么滚。
不过你为什么要坚持蛇形呢?
#8-19 - 2013-3-13 01:51
林卯
小寒 说: 我要把时间线像音乐软件的播放进度条那样放在窗口底部一长条……
我也不是说用户看不到,而是蛇形时间线不符合用户预计,虽然通过提示用户也会明白可以这么滚。
不过你为什么要坚持蛇形呢?
倒不是坚持蛇形,只是比较新奇而已。虽然新奇的设计比较冒险但也能加深印象。
但如果不用蛇形,又如何在不用翻页按钮的同时解决时间线过长的问题呢?翻页按钮要多按1~n下(在前后按钮之间再夹页数按钮?),这就导致不如点格子省事。

呃,还有实际可以是很长的蛇,视窗口宽度,一行可以到24话一长条再拐弯(超过24话不多),但bgm会压缩尺寸所以我改窄了。

(#8-15我又编辑补充了,从引用部分看你或许没看到)
#8-20 - 2013-3-13 01:59
小寒
林卯 说: 倒不是坚持蛇形,只是比较新奇而已。虽然新奇的设计比较冒险但也能加深印象。
但如果不用蛇形,又如何在不用翻页按钮的同时解决时间线过长的问题呢?翻页按钮要多按1~n下(在前后按钮之间再夹页数按钮?),这就...
不喜欢鼠标悬停计时的设计是因为我觉得这种“出现”的设计只适用于程序“主动给用户提示”,比如“这一条点完了,主人要不要点下一条?”
翻页按钮跟页码按钮实际上功能有重复,倒不如设计成翻页按钮只在鼠标进入某一区域时才渐显这样?
#8-21 - 2013-3-13 02:21
林卯
小寒 说: 不喜欢鼠标悬停计时的设计是因为我觉得这种“出现”的设计只适用于程序“主动给用户提示”,比如“这一条点完了,主人要不要点下一条?”
翻页按钮跟页码按钮实际上功能有重复,倒不如设计成翻页按钮只在鼠标进入某...
在我设想中,
上下滚动功能 是在激活窗口并光标进入时间线周围区域瞬间就有效的,
悬停出滚动条 只是估计用户还是不知道怎么办时提示用的(300毫秒是用户还没有开始慌张的时间),
而中键滚动时也出滚动条 则是提示接下来的长度。

翻页按钮现在变成什么样了?如果不碍事还是驻留着好,为了了解线长度还要给出共计话数或页数。
#9 - 2013-3-30 17:09
(自分を信じる自分を信じる)
大家都好厉害。我对程序一窍不通,只能来应援了> <