魅族M8手机界面设计-By eico design

UI / UI设计 / 手机界面 /      

uimaker
UI设计师 / 江苏 南京

来源:uimaker.com   作者:eico

关键词

 魅族M8手机界面设计-By eico design

新的起点

全系统界面的视觉包装,对于从2008年1月份才开始介入其界面设计的我们来说确实是一项艰巨的任务。接手这个项目第一件事情就是我们需要了解整个手机的开 发进度以及对于交互设计的深入程度,我们的任务也从而变得越来越明确:我们需要设计一套M8独有的品牌化视觉界面,从而整合Meizu品牌整体的视觉表现体系。

M8的主界面图标定义


第一个步骤我们先从视觉风格开始入手,重新从草图阶段开始定义图标概念。



随着 eico design 与魅族进一步的合作,从4月份开始进入最重要的系统界面重新包装过程。魅族从德国CeBIT 07展会回来后,我们重新将图标拿回设计过程将其与新的界面设计重新加以考虑。


最终版本的图标设计更多的考虑了小尺寸的可识别性以及与整体界面风格的匹配,在细节上我们也是反复的进行雕琢,做到了对功能阐述的明确以及对界面元素画龙点睛。



界面风格的探索

与此同时正在进行界面设计的前期探索工作也经历了一个月的时间,首当其冲的问题在于这个项目中很多交互逻辑以及界面布局需要通过与众不同的视觉设计来诠释,使其呈现与竞争对手截然不同的方式。在初期的设计方案中,我们尝试了多种不同的表现方式:
全新产品与全新的创意机会。

在我们与魅族持续的交流以及内部的多次探索实践之后,界面的视觉设计采用了比较大胆的亮蓝,深蓝以及灰蓝色调搭配,亮蓝这种颜色在之前的界面设计中很少用到,我们希望这个颜色 可以成为魅族(Meizu)的品牌元素,另外液晶颗粒的信息提示也成为贯穿全系统的重要视觉元素。在这个全新的产品中,我们充分利用各种机会创造可以固化的品牌要素。



如果我们的界面可以反映移动设备物理接口的信息,在界面上有相对应的提示,这将会是一个非常酷的创意!当有了这个想法我们立刻付诸实施,最棒的是魅族的工 程团队确实给与了我们发挥的余地,我们在技术上得到了充分的支持,这个想法被实现了出来!当充电的时候屏幕下方的USB接口对应处会有绿色充电提示:用户 真的可以“看“到电量被冲到设备上,同步过程也有类似的图形表述。我们将这个想法同样应用于硬件音量调节以及电源开关的提示。像这样的想法还有很多,并且都已在产品中实现。媒体播放以及小工具程序的界面设计也是一个重点。对于音乐播放功能,很多用户可能都没有将专辑整理得很好, 很可能没有专辑封面图片,那么我们利用如此高分辨率的屏幕如何可以做到在没有封面的时候(甚至)让界面(更加)吸引用户?我们设计了一个漂亮写实的黑胶碟片作为默认封面使其成为一个标志性的M8用户界面,使其具有聚焦力度与艺术性的平衡。同样在便签界面的列表处理上,我们想如果便签工具的列表界面就是便签 的罗列会怎样,结果我们使其成为现实!

整装待发

最终在经过了紧张有序的设计过程后,整套设备的界面视觉也已经焕然一新。同时我们将Meizu网站进行同步的设计更新,而产品包装设计我们也参与其中,这样 从视觉上让公司品牌与产品本身做到了更好的统一。虽然在整个开发过程中遇到诸多系统、硬件和技术上限制,但在与魅族的工程师团队努力的协作下,产品最终得 以面世。



 

手机界面设计作品01
手机界面设计作品01

手机界面设计作品02
手机界面设计作品02

手机界面设计作品03
手机界面设计作品03

手机界面设计作品04
手机界面设计作品04

手机界面设计作品05
手机界面设计作品05

手机界面设计作品06
手机界面设计作品06

手机界面设计作品07
手机界面设计作品07

手机界面设计作品08
手机界面设计作品08

原文地址:http://www.eicodesign.com/portfolio/1404.shtml

 

 收藏