#1 - 2013-2-28 08:43
小寒 (Idle singer of an empty day)
好奇来问一下Bangumi有没有UI design guidelines啊？
放了假准备做个app UI啥的……
#2 - 2013-2-28 09:12
Hiyori
外粉里黑就是guideline...
要一起做app吗(bgm105)？我最近参与了不少跨平台mobile app dev，后端有点苦手不过前端现在已经能闭着眼睛写了...

话说“放了假”是啥？春假？
#2-1 - 2013-2-28 09:23
小寒
B娘会生气的哟~
唔喵，就是春假……
其实只是想画点东西充实一下空虚寂寞冷的portfolio网站……
#2-2 - 2013-2-28 09:28
Hiyori
小寒 说: B娘会生气的哟~
唔喵，就是春假……
其实只是想做点东西充实一下空虚寂寞冷的portfolio网站……
你看web版、onAir、WP客户端、jQueryMobile做的那个移动客户端、只能上超展开的那个移动客户端每个设计语言都不一样但都是一水的除了粉就是黑就知道了啦~

我大三才有的portfolio站啊小盆友你着什么急(bgm38)
#2-3 - 2013-2-28 09:31
小寒
Hiyori 说: 你看web版、onAir、WP客户端、jQueryMobile做的那个移动客户端、只能上超展开的那个移动客户端每个设计语言都不一样但都是一水的除了粉就是黑就知道了啦~

我大三才有的portfolio...
老师要portfolio了岂可修(bgm38)今天晚上随便在博客上开个页面充数算了(bgm84)
表示颜色搭配貌似还不够啊，泥看Adobe和巨硬和苹果的guideline，每个功能项应该用什么logo和什么typography都一清二楚(bgm38)
貌似现在设计功力还不够的样子我怕成为H妈的猪队友就算了吧b38
#2-4 - 2013-2-28 10:18
Hiyori
小寒 说: 老师要portfolio了岂可修今天晚上随便在博客上开个页面充数算了
表示颜色搭配貌似还不够啊，泥看Adobe和巨硬和苹果的guideline，每个功能项应该用什么logo和什么typography都...
不要这样嘛跟小寒的typography功底比起来我才是猪队友(bgm38)
平时组team我都负责视觉设计但跟你比起来我还是躲一边做前端开发好了嘤嘤...
长江后浪推前浪前浪拍死在岸上啊！

这里又不是IT巨头怎么可能会有那么详细的guideline了啦~！
话说昨天去Google的design talk（其实就是校园招聘会）他们讲Google动画相关的设计guideline包括不同动画效果的长度，其中一个规则是218ms，问观众你们知道为什么是个这么奇怪有整有零的数嘛，哇哈哈其实那个是我们某个搞动画的工程师的生日~
Google萌死了啦我要做一辈子G家脑残粉！！
后来还给我们讲了Google的各种彩蛋什么的...总之超有爱w
#2-5 - 2013-2-28 10:23
小寒
Hiyori 说: 不要这样嘛跟小寒的typography功底比起来我才是猪队友
平时组team我都负责视觉设计但跟你比起来我还是躲一边做前端开发好了嘤嘤...

这里又不是IT巨头怎么可能会有那么详细的guidelin...
的确Google超萌超有爱的~
如果有guideline的话做起来就方便多了啊其实就是你自己懒
如、如果H妈不嫌弃的话也请拉上小寒吧！反正term2还有几天就结束了term3只用管学习就好小寒终于熬出头了！喵哈哈哈哈哈……
话说昨天看到一个用面部识别来调整字号的responsive typography真是屌爆了http://webdesign.maratz.com/lab/responsivetypography/上github一看代码全是js……
#2-6 - 2013-2-28 10:50
Hiyori
小寒 说: 的确Google超萌超有爱的~
如果有guideline的话做起来就方便多了啊其实就是你自己懒
如、如果H妈不嫌弃的话也请拉上小寒吧！反正term2还有几天就结束了term3只用管学习就好小寒终于熬出...
唔哦哦虽然没什么用可是超级碉堡！
JS超容易上手了啦快去学！

咦term3还需要学习吗，我拿到offer之后一整个term全都荒废掉了呢...
#2-7 - 2013-2-28 12:45
小寒
Hiyori 说: 唔哦哦虽然没什么用可是超级碉堡！
JS超容易上手了啦快去学！

咦term3还需要学习吗，我拿到offer之后一整个term全都荒废掉了呢...
不……不清楚的样子……
那个面部识别什么的不觉得很卡帕嘛！用户正在开开心心的浏览网站，然后舒舒服服向后一靠，突然字就变小啦！哈哈哈！被吓到啦好卡帕！(bgm38)
所以春假还是借了本jquery的书来啃好了= =
#2-8 - 2013-2-28 12:52
Hiyori
小寒 说: 不……不清楚的样子……
那个面部识别什么的不觉得很卡帕嘛！用户正在开开心心的浏览网站，然后舒舒服服向后一靠，突然字就变小啦！哈哈哈！被吓到啦好卡帕！
所以春假还是借了本jquery的书来啃好了= =
我反倒是觉得不知道自己的大头录像被存到哪里的数据库里了比较可怕...
#2-9 - 2013-2-28 12:53
小寒
Hiyori 说: 我反倒是觉得不知道自己的大头录像被存到哪里的数据库里了比较可怕...
啊呀这个想起来也是呢……
总之以后也请多多指教啦=w=
#2-10 - 2013-2-28 13:11
Hiyori
小寒 说: 啊呀这个想起来也是呢……
总之以后也请多多指教啦=w=
突然这么生疏干什么呀你看别人都被我们吓跑了(bgm38)
#2-11 - 2013-2-28 13:14
小寒
Hiyori 说: 突然这么生疏干什么呀你看别人都被我们吓跑了
計画通り(bgm84)
#3 - 2013-2-28 16:20
林卯 (✨️VIP 8✨️)
(从现在开始，这里就不是自演乙小组了~(bgm01))
#3-1 - 2013-2-28 16:33
小寒
一起来制定UI guidelines吧！（误
#3-2 - 2013-2-28 16:58
林卯
小寒 说: 一起来制定UI guidelines吧！（误
越俎代庖sai会同意吗…
其实呢我没看出bgm的具体界面指导方针(UI guidelines)，像是这一页就混杂了好几种视觉风格。不过也能看出一些规律，像是这个回复框下“写好了”按钮比“取消”要显著…
#3-3 - 2013-2-28 17:02
小寒
林卯 说: 越俎代庖sai会同意吗…
其实呢我没看出bgm的具体界面指导方针(UI guidelines)，像是这一页就混杂了好几种视觉风格。不过也能看出一些规律，像是这个回复框下“写好了”按钮比“取消”要显著…
所以才说（误……
其实我觉得bgm的界面consistency有点低所以才想着问问的……
#3-4 - 2013-2-28 18:26
林卯
小寒 说: 所以才说（误……
其实我觉得bgm的界面consistency有点低所以才想着问问的……
这稠度 一致性(consistency)…好像是几个改版积累下来的。
但想自立个风格仿佛的标准应该还是可行的。(比如我头像用色)
#3-5 - 2013-2-28 23:37
小寒
林卯 说: 这稠度 一致性(consistency)…好像是几个改版积累下来的。
但想自立个风格仿佛的标准应该还是可行的。(比如我头像用色)
其实我的意思就是直接从bgm网页上看能不能提取出guideline来……
#3-6 - 2013-2-28 23:39
林卯
小寒 说: 其实我的意思就是直接从bgm网页上看能不能提取出guideline来……
(我想想)…那么，怎样提取？
#3-7 - 2013-2-28 23:43
小寒
林卯 说: (我想想)…那么，怎样提取？
其实我是想在春假的时候给bgm做一套跨平台应用UI来练练手，我想先从Mac桌面做起……
确定好大致的布局之后就可以做出UI Elements kit，在决定这些UI Elements的形状外观的时候再根据bgm的网页风格来定。比如界面元素的圆角要几px啦之类的
#3-8 - 2013-2-28 23:47
林卯
小寒 说: 其实我是想在春假的时候给bgm做一套跨平台应用UI来练练手，我想先从Mac桌面做起……
确定好大致的布局之后就可以做出UI Elements kit，在决定这些UI Elements的形状外观的时候再...
圆角简单：5px，平滑。但这阴影…
#3-9 - 2013-2-28 23:48
小寒
林卯 说: 圆角简单：5px，平滑。但这阴影…
关于bgm的阴影问题我觉得是没有consistency的表现呢。
所以如果是我做app UI的话我就统一规定阴影好了。我想避免比较夸张的阴影，比如统一定成drop shadow distance 2px，inner shadow distance 2px什么的……
#3-10 - 2013-2-28 23:52
林卯
小寒 说: 关于bgm的阴影问题我觉得是没有consistency的表现呢。
所以如果是我做app UI的话我就统一规定阴影好了。我想避免比较夸张的阴影，比如统一定成drop shadow distance 2p...
这就自己定吧。阴影扩散度也要考虑。
#3-11 - 2013-3-1 01:29
小寒
林卯 说: 这就自己定吧。阴影扩散度也要考虑。
总之我的想法是带轻度skeuomorphic风的赶脚。总觉得用粉白就够了
#3-12 - 2013-3-1 01:46
林卯
小寒 说: 总之我的想法是带轻度skeuomorphic风的赶脚。总觉得用粉白就够了
这词记不住又搜了下…苹果的skeuomorphic翻译还没有统一啊…一种译法是“模仿现实世界”。
我自己考虑近似译为“拟物化”。
你若要将bgm拟物化…是不是想到了什么灵感？
#3-13 - 2013-3-1 01:50
小寒
林卯 说: 这词记不住又搜了下…苹果的skeuomorphic翻译还没有统一啊…一种译法是“模仿现实世界”。
我自己考虑近似译为“拟物化”。
你若要将bgm拟物化…是不是想到了什么灵感？
以我的PS功力还没到能把b娘拟物化的地步，而且即便真的可以，为了保持consistency工作将会很大……（没错，就译作拟物化
轻度拟物化只是稍微做出质感但不过分，比如pokki官网那种
#3-14 - 2013-3-1 01:58
林卯
小寒 说: 以我的PS功力还没到能把b娘拟物化的地步，而且即便真的可以，为了保持consistency工作将会很大……（没错，就译作拟物化
轻度拟物化只是稍微做出质感但不过分，比如pokki官网那种
届时有想法的话我也试着来帮忙吧~
#3-15 - 2013-3-1 03:12
小寒
林卯 说: 届时有想法的话我也试着来帮忙吧~
唔喵，放了假之后就可以开始设计了，到时候也请多多指教哟~
#4 - 2013-2-28 20:06
滾滾洗衣君
你們一起建個點格子A站吧(bgm38)。
#4-1 - 2013-2-28 21:06
林卯
什么意思…？
#5 - 2013-3-1 00:02
Sai🖖 (Awesome!)
Bangumi 没有 UI Guideline，UI 有想法就在新功能里尝试一下，所以全站散落着从 08 年至今各种乱七八糟的风格。

现在的常用色：
粉色 #F09199
蓝色 [背景]#369CF8 [标题]#42ABB3 [链接]#0084B4
米色 #F9F9F5

圆角 5px，若非必要不用阴影。

不建议设定跨平台通用 UI 规范，每个平台都有各自特色和操作习惯，如果做原生客户端还是针对不同平台特点来设计为佳。
#5-1 - 2013-3-1 01:13
小寒
这个好顶赞！谢谢老板建议！
#5-2 - 2013-3-1 01:22
Hiyori
但是跨平台开发好方便（躺
#5-3 - 2013-3-1 01:27
小寒
Hiyori 说: 但是跨平台开发好方便（躺
那就先制定一套OSX的好了，有了OSX的话iOS原生也会很容易吧（其实只是受不了air的效率低下(bgm38)
#5-4 - 2013-3-1 02:02
Hiyori
小寒 说: 那就先制定一套OSX的好了，有了OSX的话iOS原生也会很容易吧（其实只是受不了air的效率低下
OSX iOS是比较有共同性不过我都不会做诶嘿嘿w
我觉得现在bgm比较缺的是好使的移动客户端。
#5-5 - 2013-3-1 03:10
小寒
Hiyori 说: OSX iOS是比较有共同性不过我都不会做诶嘿嘿w
我觉得现在bgm比较缺的是好使的移动客户端。
Android版其实已经很不错了，不过就是UI还有提升的地方，以及（限于API开放程度的？）功能缺失
相比起用air作为wrapper我还是偏向cocoa或者objc的原生呢……
#5-6 - 2013-3-1 07:07
Hiyori
小寒 说: Android版其实已经很不错了，不过就是UI还有提升的地方，以及（限于API开放程度的？）功能缺失
相比起用air作为wrapper我还是偏向cocoa或者objc的原生呢……
啥bangumi有android版？
你是说用jQuery Mobile做的那个跨平台的么.....？
#5-7 - 2013-3-1 07:13
小寒
Hiyori 说: 啥bangumi有android版？
你是说用jQuery Mobile做的那个跨平台的么.....？
Google Play上就有啊……不是网页版，是一个真真实实的app哟