静静设计 - 一个用心创造设计改变生活的女设计师的个人博客网站

彩屏手机软件界面设计UI规范(转)

一、界面设计的原则
手机软件界面是置身于手机操作系统中的人机交互的窗口,设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计,界面设计师首先应对手机的系统性能有所了解,例如:手机所支持的最多色彩数量手机所支持的图像格式,其次应该对软件的功能详细了解熟悉每个模块的应用模式。从而做到最大限度的利用现有资源进行用户界面的开发。

 

 



二、定制界面版式

a)界面构成的基本单位
软件界面的构成在其界面所辖范围往往会被分为几个标准的信息区域:
标题区、主信息操作区、公共导航区、
标题区:主要是软件LOGO、软件版本、以及相关图文信息。


功能操作区:它是软件的核心部分,也是版面上面积最宽的部分。


公共导航区:它是对软件操作进行宏观操控的区域,随时可见,在这里它可以保存当前操作结果、切换当前操作模块、退出软件系统,实现对软件的灵活操控。
界面版式的设定,在很大程度上需要借鉴相关手机系统界面的版式,以确保样式的相对统一,利于系统与软件的整合。当然也要考虑软件本身的应用特性,结合操作的可用性和可实施性,对版式进行合理的调整,使呈现信息的区域与区域之间协调统一,主次得当。确保用户可以方便快捷地进行功能操作。
b)界面元素的分解与组合
界面的版式构成依赖于界面的点线面的构成,手机软件由于自身运行环境小,那就决定了必须控制自身的大小。因此我们的界面图形必须根据需要进行切分,能够用程序实现的效果尽量用程序实现,如单色的线和面。复杂的图标就保留用图片方式来呈现,(这个我知道)因此我们在界面版式的设计稿完成后,必须和程序员进行密切的沟通,对需要分解的图形元素进行分解后优化,然后交付程序员进行版式的第二次组合。在图形元素第二次组合的过程中,为确保事先已经设计好的界面效果能够比较准确地反映在软件的实际界面上,针对图形切片,我们应给预准确的尺寸及坐标位置,以方便程序员准确的把界面嵌合到程序中去,以保证界面的最终可用。

三、视觉效果
彩屏手机界面的视觉效果,应该遵循给用户舒适、生机与活力的原则,通过视觉感官的刺激,增加用户的亲和力,适应不同用户的不同心理特征。
1)简约明快型(适合色彩支持数量较少的彩屏手机)
基于大块颜色和线条组合的构成方式,不乏大气、简约且精到、精彩。点线面基本元素的形状构成结合色彩的纯净搭配,干净利落,给用户的操作带来轻松的感受。
在设计的过程中基于上述风格设计的思路,在视觉效果的设计上需要参考如下方法:
a、 结合界面图形设计的隐喻性,图标图形尽量使用简洁的平面图形,尽量使用像素化的表现形式。
b、 展现图形界面的精到之处,合理的使用线条和色彩渐变,以确保细节的完美体现。
c、 把握界面整体色调的同时注意在图标和线条的色彩配置上下功夫,以活跃整个画面,避免整个界面色彩单一,黯淡无光.
2) 高贵华丽型(适合支持色彩数量较多的彩屏手机,最好支持带8位Alpha通道的png透明图)

基于饱和的色彩和华丽的质感,塑造超酷、超眩的视觉感受,利用羽化了的像素对图形图像进行仿真设计,不仅塑造界面色彩、形状,还进一步在元素的质感和体积感上下功夫。给用户一种高贵华丽的视觉享受。
在设计的过程中基于上述风格设计的思路,在视觉效果的设计上需要参考如下方法:
a、 塑造界面的体积感和质感,根据需要表现透明、半透明、粗燥、光滑等不同的视觉效果。
b、 图标的制作中尽量避免生硬的边缘轮廓,提倡渐变、羽化加强图形的仿真性能,使设计更加趋于人性化。
c、考虑界面的整体色调,最好使用邻近色或同类色进行色彩构成,采用色彩的弱对比,因为界面图形本身就结合了体积感和质感的塑造,如果整体色调对比太强,很容易给用户造成眼睛疲劳。
四、视觉元素的设计

图形元素设原则:
风格统一、简洁、直观、隐喻、
图形元素设计流程:
确定风格——确定图标的功能——确定图标的造型——进行制作
1. 确定风格:就是根据界面的总体风格的策划思路,结合界面其他元素的需要,对图标的整体风格进行考虑,以保证图标和整体效果的融合。
2. 确定图标功能:在设计图形之前这一点显得特别重要,我们设计图标的目的是实用又美观,也就是说要考虑图标的隐喻性,他代表的意思必须是用户可知的、熟知的。所以图标的功能是我们进行图标造型设计的标准和依托。
3. 确定图标的造型:确定造型的方法多种多样,只要不违背图标表达的主题,我们可以到网上搜索一些,结合图标功能进行一些修改,或者用photoshop和coreldraw进行编辑,总之所有界面上同级、同类的图标我们还要保证表现形式的统一,避免用户视觉上的紊乱。
4. 进行制作:利用photoshop,还有其它软件,现不一一介绍。根据总体风格对图标进行细节美化。转换成程序所需要的相应格式。
    手机软件界面设计在界面设计领域是一项新兴的设计领地,在相对狭小的版面我们要设计出精美实用的界面,需要我们界面设计人员在象素化的图形世界需找更多的细节表现。在制作过程中更需要我们深入了解手机及其相关软件,密切地和程序员沟通、交流共同打造这片新土地。

如果觉得对您的学习有所帮助,请扫描以下的二维码进行捐赠:

标签:

转载请注明来源: JingBlog - 《彩屏手机软件界面设计UI规范(转)》

本文链接地址: http://www.jing-ui.com/blog/19