MiCrease-MIUI Theme Design 2012 (12P)



以Crease 折痕 褶皱 为主线的一套UI设计方案.    
在想法,配色,形式上,维持在一个维度,使整套设计风格保持统一
希望能给使用者带来一种轻量 快速 无心理负担的体验

1.icons
形式上 通过不同的褶皱,折痕方式来辅助表现每个图标自身的区块特点    
另外提供了三种不同的默认背板样式.
配色上,使用了饱和度不高的灰色调,希望在长时间使用下不会带来视觉疲劳.
某个程度上也降低了 用户在选择上 因为颜色过于饱和 而无法聚焦造成的选择困难



2.锁屏
在圆形,左右 ,上下,三种方式中最终还是选择了上下解锁,
因为上下解锁,在交互上是权衡了用户左右手的操作习惯.  
并且上下解锁的路径长度都短于其它两种方式 ,  
在一些操作不是很方便的使用环境下 也能快速方便解锁 .



3.锁屏 
在默认锁屏上 增加了 3个便捷入口,
长按解锁图标一秒,唤醒,电话,相机,简讯的 3个便捷入口,点按取消. 



4.未接来电提醒
当有未接来电时,原解锁图标更换成电话icon 
同时外围出现翠绿的环状图形,由浅到深的进行渐隐,加强给用户的提示.
点击图标进入,未接来电界面.
按住下拉进入手机主界面(在按住下拉同时   顶部 4 Missed Call 文字 淡出 )



5.未收简讯



6.音乐播放界面,左右切换歌曲,点按图标 暂停/播放  
按住图标,绕着音乐轨迹做原环状手势操作,进行快进 后退.
按住下拉,进行解锁,播放时间文字 淡出.



7. 充电模式 
图标外圈环状图形  由下至上 显示 当时的充电量 
(ps:为了和 音乐播放界面做区分 所以在充电模式下 外圈图形 使用从下至上的显示)



8.解锁动画
原本是打算把,褶皱动画 这个作为跟随解锁手势,同步触发. 
但由于后来考虑到,用户在设置密码的情况下,这种交互方式会比较尴尬 ,
因此只好放弃手势触发,作为解锁后的一个交互动画来体现.



9.第一屏
时钟Widget 做成折页效果 与主题呼应



10.第二屏



11.锁屏加图片壁纸效果
附送锁屏壁纸一张 
图片由 http://weibo.com/loving6qq  6QQ同学提供,
因此不涉及版权问题



12.手机后盖提取 小米商店的图标元素,作为后盖设计. 
颜色与小米手机包装呼应,体现环保理念.同时体现褶皱折痕概念. 


[本日志由 blacksnail 于 2012-09-12 07:50 PM 编辑]
文章来自: 本站原创
引用通告地址: http://www.black-snail.cn/blog/trackback.asp?tbID=360
Tags:
Comments: 5 | Trackbacks: 0 | Views: 3461
  • 1
py_3 [2013-01-24 01:28 AM]
不错哦
g0mib0y [2012-10-24 08:39 PM]
HI is it possible to download your theme somewhere?
1 [2012-08-03 06:27 PM]
表示祝贺
dreamer [2012-08-01 03:04 PM]
恭喜 然后觉得手电筒的图标稍显突兀
kevinG [2012-07-17 12:03 AM]
厉害~学习了~
  • 1
发表评论
昵 称:
密 码: 游客发言不需要密码.
验证码:
内 容:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭