精华内容
下载资源
问答
  • 选择一款手机时,手机界面设计也是消费者所在乎的设计之一。很多人或许认为手机UI设计并不重要,只要手机外观好就行,但是事实并不是如此。手机的界面设计虽然有很强的设计规范性,这些设计规范约束着我们的设计,...
  • 手机软件系统已成为用户直接操作和应用的主体,它应以美观实用、操作便捷为用户所青睐。用户界面设计的规范性显得尤为重要
  • 手机软件界面设计

    千次阅读 2008-06-18 14:36:00
    手机软件界面设计 界面的说法以往常见的是在人机工程学中。"人机界面"是指人机间相互施加影响的区域,凡参与人机信息交流的一切领域都属于人机界面。"而设计艺术是研究人一物关系的学科,对象物所代表的不是简单的...
    手机软件界面设计   界面的说法以往常见的是在人机工程学中。"人机界面"是指人机间相互施加影响的区域,凡参与人机信息交流的一切领域都属于人机界面。"而设计艺术是研究人一物关系的学科,对象物所代表的不是简单的机器与设备,而是有广度与深度的物;这里的人也不是"生物人",不能单纯地以人的生理特征进行分析。"人的尺度,既应有作为自然人的尺度,还应有作为社会人的尺度;既研究生理、心理、环境等对人的影响和效能,也研究人的文化、审美、价值观念等方面的要求和变化"。      设计的界面存在于人一物信息交流,甚至可以说,存在人物信息交流的一切领域都属于设计界面,它的内涵要素是极为广泛的。可将设计界面定义为设计中所面对、所分析的一切信息交互的总和,它反映着人一物之间的关系。   设计界面的存在      美国学者赫伯特.A.西蒙提出:设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。所以设计是把握人工物内部环境与外部环境接合的学科,这种接合是围绕人来进行的。"人"是设计界面的一个方面,是认识的主体和设计服务的对象,而作为对象的"物"则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体,就如我们看见一件产品、一栋建筑,它带给人的不仅有使用的功能、材料的质地,也包含着对传统思考、文化理喻、科学观念等的认知。"任何一件作品的内容,都必须超出作品中所包含的那些个别物体的表象。"分析"物"也就分析了设计界面存在的多样性。      为了便于认识和分析设计界面,可将设计界面分类为: 1)功能性设计界面接受物的功能信息,操纵与控制物,同时也包括与生产的接口,即材料运用、科学技术的应用等等。这一界面反映着设计与人造物的协调作用。      2)情感性设计界面即物要传递感受给人,取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情,而不是个人的情感抒发。设计师"投入热情,不投入感情",避免个人的任何主观臆断与个性的自由发挥。这-界面反映着设计与人的关系。      3)环境性设计界面外部环境因素对人的信息传递。任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在,环境的物理条件与精神氛围是不可忽缺的界面因素。      应该说,设计界面是以功能性界面为基础,以环境性界面为前提,以情感性界面为重心而构成的,它们之间形成有机和系统的联系。   设计界面存在的方法论意义     当机械大工业发展起来的时候,如何有效操纵和控制产品或机械的问题导致了人机工程学。二战后,随着体力的简单劳动转向脑力的复杂劳动,人体工学也进一步地扩大到人的思维能力的设计方面,"使设计能够支持、解放、扩展人的脑力劳动"。在目前的知识经济时代,在满足了物质需求的情况下,人们追求自身个性的发展和情感诉求,设计必须要着重对人的情感需求进行考虑。设计因素复杂化导致设计评价标准困难化。一个个性化的设计作品能否被消费者所认同?新产品开发能不能被市场所接受?在目前,我国大部分企业实力还并不强大,设计开发失利承受力还不很强的情况下,如何系统地、有根据地认识、评价设计,使其符合市场,就需要对设计因素再认识。利用界面分析法,正是使设计因素条理化,避免将人作为"生物人"的片面和走出笼统地说"设计=科学十艺术"的简单误区。      现代的人机工程学和消费心理学为设计提供了科学的依据,它们的成功就在于实验、调查和数理表述,是较为可系的。同样对设计艺术而言,进行设计界面的分析,也要有生理学、心理学、文化学、生物学、技术学学科基础。从理论上来说,它要直接建立在信息论和控制论的基础之上。相对于机械、电子设计和人机设计,以往人机界面设计把握了技术科学的认识和手段,忽视了人文科学观念与思想。它的界面设计只能存在于局部的思考范围内,只成为一个设计的阶段。      有人以功能论来评判设计。"功能决定形态"曾是20世纪上半叶的设计格言,它的提法是片面的。这是因为:第一,功能不是单一的,它包括使用功能、审美功能、社会功能、环境功能等。"过分追求单一的功能会导致将许多重要内容(装饰性、民族性、中间性)被排斥掉"。而且"有些内容并不是'功能'的概念所能包括了的,更何况物质和精神的内容也并不是时时处处等质等量的融洽在一个统一体中,随产品的不同、时期的不同,它们各自的主次地位也随之变化"。在现今信息技术高度发展的时代,情感因素越来越成为设计的主要方面。物质意义上的功能在保持其基础地位的情况下,却日益不能代表情感诉求的表述;第二,按"形态服从功能"而设计的产品,对于不熟悉它的使用者来说是难以理解的,产品要为人们所理解,必须要借助公认的信码,即符号系统;第三,满足同一功能的产品形态本来就不是唯一的,象汽车等成熟的产品,年度换型计划等措施成为商品经济中日益不可避免的现象。社会经济发展到一定程度,才能出现设计的专业需求,而这时人们的基本物质需求已能满足,简单地以物质性功能来决定设计是不恰当的。      相反,设计界面体现了人一物交流信息的本质,也是设计艺术的内涵,它包括了设计的方方面面,明确了设计的目标与程序。   设计界面的分析      按照设计界面的三类划分,有助于考察设计界面的多种因素。当然,应该说设计界面的划分是不可能完全绝对的,三类界面之间有涵义上也可能交互与重叠,如宗教文化是一种环境性因素,但它带给信仰者的往往更多的却是宗教的情感因素。在这里环境性和情感性是不好区分的,但这并不妨碍不同分类之间所存在的实质性的差异。      1 功能性界面 对功能性界面来说,它实现的是使用性内容,任何'件产品或内外环境或平面视觉传达作品,其存在的价值首要的是在于使用性,由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面,分析思维作为一种理性思维而存在。如果作为一种处理方式来设计产品,则这种产品会使多种特征性(如民族性、纯粹性)因素中性化,如果去除产品商标,就很难认出是哪国的或哪个公司的产品。当然,这方面也说明了产品中存在着共同性因素,它使全人类能做出同样的反应。人的感觉和判断能力有着国际性的、客观性的特征。      功能性界面设计要建立在符号学的基础上。国际符号学会对符号学所下定义是:符号是关于信号标志系统(即通过某种渠道传递信息的系统)的理论,它研究自然符号系统和人造符号系统的特征。广义的说,能够代表其他事物的东西都是符号,如字母、数字、仪式、意识、动作等,最复杂的一种符号系统可能就是语言。设计功能界面,不可避免地要让使用者明白功能操作。每一操作对人来说应是符合思维逻辑的,是人性的,而对机械、电子来说则应是准确的、确定无疑的,这双方的信息传递是功能界面的核心内涵。      2 情感性界面 一个家庭装饰要赋予人家居的温馨,一副平面作品要以情动人,一件宗教器具要体现信仰者的虔诚。其实任何一件产品或作品只有与人的情感产生共鸣才能为人所接受,"敝帚自珍"正体现着人的感情寄托,也体现着设计作品的魅力所在。      现代符号学的发展也日益这一领域开拓,以努力使这种不确定性得到压缩,部分加强理性化成分。符号学逐渐应用于民俗学、神话学、宗教学、广告学等领域,如日本符号学界把符号学用于认识论研究,考察认识知觉、认识过程的符号学问题。同时,符号学还用于分析利用人体感官进行的交际,并将音乐、舞蹈、服装、装饰等都作为符号系统加以分析研究,这都为设计艺术提供了宝贵与有借鉴价值的情感界面设计方法与技术手段。      3 环境性界面 任何的设计都要与环境因素相联系,它包括社会、政治和文化等综合领域。处于外界环境之中,"是以社会群体而不是以个体为基础的",所以环境性因素一般处于非受控与难以预见的变化状态。      联系到设计的历史,我们可以利用艺术社会学的观点去认识各时期的设计潮流。18世纪起,西方一批美学家已注意到艺术创造与审美趣味深受地理、气候、民族、历史条件等环境因素的影响。法国实证主义哲学家孔德指出:"文学艺术是人的创造物,原则上是由创造它的人所处的环境条件决定。"法国文艺理论家丹纳认为"物质文明与精神文明的性质面貌都取决于种族、环境、时代三大因素"。无论是工艺美术运动、包豪斯现代主义或20世纪80年代的反设计,现代的多元化,"游牧主义"(Nemadism)都反映着环境因素的影响。      环境性界面设计所涵盖的因素是极为广泛的,它包括有政治、历史、经济、文化、科技、民族等,这方面的界面设计正体现了设计艺术的社会性。      以上说明了设计艺术界面存在的特征因素,说明在理性与非理性上都存在明确、合理、有规则、有根据的认识方法与手段。      成功的作品都是完善地处理了这三个界面的结晶。如贝聿铭设计的卢浮宫扩建工程,功能性处理得很好,没有屈从于形式而损害功能;但同时又通过新材料及形式反映新的时代性特征及美学倾向,这是环境性界面处理的典范;人们观看卢浮宫,不是回到古代,而是以新的价值观去重新审视、欣赏,它的三角形外观符合了人们的心理期望,这是情感性界面处理的极致。     设计界面的运用原则      1)合理性原则,即保证在系统设计基础上的合理与明确。    任何的设计都既要有定性也要有定量的分析,是理性与感性思维相结合。努力减少非理性因素,而以定量优化、提高为基础。设计不应人云亦云,一定要在正确、系统的事实和数据的基础上,进行严密地理论分析,能以理服人、以情感人。      2)动态性原则,即要有四维空间或五维空间的运作观念。一件作品不仅是二维的平面或三绝的立体,也要有时间与空间的变换,情感与思维认识的演变等多维因素。      3)多样化原则,即设计因素多样化考虑。当前越来越多的专业调查人员与公司出现,为设计带来丰富的资料和依据。但是,如何获取有效信息,如何分析设计信息实际上是一个要有创造性思维与方法的过程体系。      4)交互性原则,即界面设计强调交互过程。一方面是物的信息传达,另一方面是人的接受与反馈,对任何物的信息都能动地认识与把握。      5)共通性原则,即把握三类界面的协调统一,功能、情感、环境不能孤立而存在。       的应用方法      设计界面所包含的因素是极为广泛的,但在运用中却只能有侧重、有强调的把握。设计因素虽多,但它仍是一个不可分割的整体。它的结果是物化的形,但这个形却是代表了时代、民族等方面的意识,并最终反映出人的"美"的心理活动。      设计界面的运用,核心是设计分析。在一些国际性的大公司,如索尼、松下、柯尼卡等,都有许多的成功案例可为借鉴。如柯尼卡公司设计其相机时,首先不是去绘制"美"的形和考虑技术的进步,而是进行对象人的日常行为分析,作出故事版(STORY)。它先假定对象人的年龄为35岁,名:Xxxx,从而分析他的家庭、喜好与憎恶,分析他的日常行为,进而考察其人在什么场合需要僚机,从而为设计提供概念(CONCEPT)与目标(TARGET),进行设计。经过分析,设计师有了明确的概念与目标,并随信息的交互产生了创造力。      另一方面,设计师自身对社会环境也要进行深入的认识与考察,对设计的作品取向有明晰的认识:是否符合人们的消费预期?是否能感受到人们的审美知觉?日本设计师佐野邦雄先生曾作一图--生活的变迁与设计师的课题,将日本及世界上某些非常有影响性的事件,如技术的进步、企业的发展等等都进行了归纳,进而对设计有了深入的认识与感悟。      所以,要运用好设计的界面,理性的认识是首要的,其次就是创造性的,而且是有实效性的分析、处理信息。设计不是一成不变的,分析方法也不是一成不变的,设计的界面同样是在人一物   UI界面设计流程 人类社会逐步向非物质社会迈进,互联网信息产业已经走入我们的生活。在这样一个非物质社会中,网站与软件这些非物质产品再也不象过去那样紧紧靠技术就能处于不败之地。工业设计开始关注非物质产品。但是在国内依然普遍存在这样一个称呼"美工"。"工"的意思就是没有思想紧紧靠体力工作的人。这是一个很愚昧的做法,愚昧在于称呼职员美工的企业没有意识到界面与交互设计能给他们带来的巨大经济效益,另一方面愚昧在于被称为美工的人不知道自己应该做什么,以为自己的工作就是每天给界面与网站勾边描图。     本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴,是一个科学的设计过程,理性的商业运作模式。而不是单纯的美术描边。     UI的本意是user interface也就是用户与界面的关系。他包括交互设计,用户研究,与界面设计 三个部分。本文主要讲述用户研究与界面设计的过程。   一个通用消费类软件界面的设计大体可分为五个步骤:     需求阶段 分析设计阶段 调研验证阶段 方案改进阶段 用户验证反馈阶段需求阶段     软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。     除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。       分析设计阶段     通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲和,放松与 cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作标点的风格,我们设计出数套不同风格的界面。     调研验证阶段     几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。     测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。       例如:      数据收集方式:厅堂测试/模拟家居/办公室。      测试时间:X年X月X日X日。      测试区域:北京、广州、天津。     测试对象。某消费软件界定市场用户。主要特征为:     对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高; 电脑使用经历一年以上;   家庭购买电脑时品牌和机型的主要决策者   年龄:X-X岁;   年龄在X岁以上的被访者文化程度为大专及以上;   个人月收入X以上或家庭月收入X元及以上;   样品     五套软件界面     样本量:X个,实际完成X个。       调研阶段需要从以下几个问题出发:     用户对各套方案的第一印象 用户对各套方案的综合印象 用户对各套方案的单独评价 选出最喜欢的 选出其次喜欢的 对各方案的色彩,文字,图形等分别打分。 结论出来以后请所有用户说出最受欢迎方案的优缺点。     所有这些都需要用图形表达出来,直观科学。     方案改进阶段     经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不能换皮肤的应用软件或游戏的界面)将方案做到细致精美。     用户验证阶段     改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。     经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。   五、UI设计的一般工作流程   (取自某UI设计服务公司)   1)熟悉行业(熟悉您的软件所涉及的行业,以便制作出适合行业特征的界面风格)   2)了解软件(了解您软件的工程进度,做出针对您进度的工作计划)。   3)与软件开发工程师和市场人员讨论界面风格(广泛听取研发和市场人员的意见,做出 最适合市场的软件)。   4)人机分析(对您的软件进行人机分析,增强您软件的易用性)。   5)做方案(做出设计方案,并明确细节思想)。   6)审定方案(与技术和市场人员一起审定方案,并听取修改意见)。   7)修改——审定(将有几次重复)   8)细化、制作界面(开始制作软件界面)。   9)与软件开发工程师合作把界面加入到程序中。   10)细部修改,完成。   11)进行软件包装盒、光盘盘面、盘套等的设计工作。   12)后期跟踪服务(在完成项目后,对您的软件进行跟踪服务,即对您软件从发布到推出新版本之间的小规模修改进行调整,包括对帮   软件界面设计要素   界面设计是为了满足软件专业化标准化的需求而产生的对软件的使用界面进行美化优化规范化的设计分支。具体包括软件启动封面设计,软件框架设计,按钮设计,面板设计,菜单设计,标签设计,图标设计,滚动条及状态栏设计,安装过程设计,包装及商品化。     在设计的过程中有较多注意的关键问题,以下列出几点:     (1)软件启动封面设计     应使软件启动封面最终为高清晰度的图像,如软件启动封面需在不同的平台、操作系统上使用将考虑转换不同的格式,并且对选用的色彩不宜超过256色,最好为216色安全色。软件启动封面大小多为主流显示器分辨率的1/6大。如果是系列软件将考虑整体设计的统一和延续性。在上面应该醒目的标注制作或支持的公司标志、产品商标,软件名称,版本号,网址,版权声明,序列号等信息,以树立软件形象,方便使用者或购买者在软件启动的时候得到提示。插图宜使用具有独立版权的,象征性强的,识别性高的,视觉传达效果好的图形,若使用摄影也应该进行数位处理,以形成该软件的个性化特征。     (2)软件框架设计     软件的框架设计就复杂得多,因为涉及软件的使用功能,应该对该软件产品的程序和使用比较了解,这就需要设计师有一定的软件跟进经验,能够快速的学习软件产品,并且在和软件产品的程序开发员及程序使用对象进行共同沟通,以设计出友好的,独特的,符合程序开发原则的软件框架。软件框架设计应该简洁明快,尽量少用无谓的装饰,应该考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则,并且为将来设计的按钮,菜单,标签,滚动条及状态栏预留位置。设计中将整体色彩组合进行合理搭配,将软件商标放在显著位置,主菜单应放在左边或上边,滚动条放在右边,状态栏放在下边,以符合视觉流程和用户使用心理。     (3)软件按钮设计     软件按钮设计应该具有交互性,即应该有3到6种状态效果:点击时状态;鼠标放在上面但未点击的状态;点击前鼠标未放在上面时的状态;点击后鼠标未放在上面时的状态;不能点击时状态;独立自动变化的状态。按钮应具备简洁的图示效果,应能够让使用者产生功能关联反应,群组内按钮应该风格统一,功能差异大的按钮应该有所区别。     (4)软件面板设计     软件面板设计应该具有缩放功能,面板应该对功能区间划分清晰,应该和对话框,弹出框等风格匹配,尽量节省空间,切换方便。     (5)菜单设计     菜单设计一般有选中状态和未选中状态,左边应为名称,右边应为快捷键,如果有下级菜单应该有下级箭头符号,不同功能区间应该用线条分割。     (6)标签设计     标签设计应该注意转角部分的变化,状态可参考按钮。     (7)图标设计     图标设计色彩不宜超过64色,大小为16x16、32x32两种,图标设计是方寸艺术,应该加以着重考虑视觉冲击力,它需要在很小的范围表现出软件的内涵,所以很多图标设计师在设计图标时使用简单的颜色,利用眼睛对色彩和网点的空间混合效果,做出了许多精彩图标。     (8)滚动条及状态栏设计     滚动条主要是为了对区域性空间的固定大小中内容量的变换进行设计,应该有上下箭头,滚动标等,有些还有翻页标。状态栏是为了对软件当前状态的显示和提示。     (9)安装过程设计     安装过程设计主要是将软件安装的过程进行美化,包括对软件功能进行图示化。     (10)包装及商品化     最后软件产品的包装应该考虑保护好软件产品,功能的宣传融合于美观中,可以印刷部分产品介绍,产品界面设计   GOIDEA主要服务项目: 界面设计 企业海报设计,企业形象海报设计,企业产品海报设计,宣传海报设计,海报设计,直邮广告设计(DM),企业年报设计,型录设计,样本设计,折页设计,单页设计,宣传单设计,广告单设计,房地产楼书设计,通讯录设计,招标书设计包装设计等.     涵义      界面设计的说法以往常见的是在人机工程学中。"人机界面"是指人机间相互施加影响的区域,凡参与人机信息交流的一切领域都属于人机界面。"而设计艺术是研究人一物关系的学科,对象物所代表的不是简单的机器与设备,而是有广度与深度的物;这里的人也不是"生物人",不能单纯地以人的生理特征进行分析。"人的尺度,既应有作为自然人的尺度,还应有作为社会人的尺度;既研究生理、心理、环境等对人的影响和效能,也研究人的文化、审美、价值观念等方面的要求和变化"。      设计的界面存在于人一物信息交流,甚至可以说,存在人物信息交流的一切领域都属于设计界面,它的内涵要素是极为广泛的。可将设计界面定义为设计中所面对、所分析的一切信息交互的总和,它反映着人一物之间的关系。   存在      美国学者赫伯特.A.西蒙提出:设计是人工物的内部环境(人工物自身的物质和组织)和外部环境(人工物的工作或使用环境)的接合。所以设计是把握人工物内部环境与外部环境接合的学科,这种接合是围绕人来进行的。"人"是设计界面的一个方面,是认识的主体和设计服务的对象,而作为对象的"物"则是设计界面的另一个方面。它是包含着对象实体、环境及信息的综合体,就如我们看见一件产品、一栋建筑,它带给人的不仅有使用的功能、材料的质地,也包含着对传统思考、文化理喻、科学观念等的认知。"任何一件作品的内容,都必须超出作品中所包含的那些个别物体的表象。"分析"物"也就分析了设计界面存在的多样性。      为了便于认识和分析设计界面,可将设计界面分类为:    1)功能性设计界面接受物的功能信息,操纵与控制物,同时也包括与生产的接口,即材料运用、科学技术的应用等等。这一界面反映着设计与人造物的协调作用。      2)情感性设计界面即物要传递感受给人,取得与人的感情共鸣。这种感受的信息传达存在着确定性与不确定性的统一。情感把握在于深入目标对象的使用者的感情,而不是个人的情感抒发。设计师"投入热情,不投入感情",避免个人的任何主观臆断与个性的自由发挥。这-界面反映着设计与人的关系。      3)环境性设计界面外部环境因素对人的信息传递。任何一件或一个产品或平面视觉传达作品或室内外环境作品都不能脱离环境而存在,环境的物理条件与精神氛围是不可忽缺的界面因素。      应该说,设计界面是以功能性界面为基础,以环境性界面为前提,以情感性界面为重心而构成的,它们之间形成有机和系统的联系。   存在的方法论意义     当机械大工业发展起来的时候,如何有效操纵和控制产品或机械的问题导致了人机工程学。二战后,随着体力的简单劳动转向脑力的复杂劳动,人体工学也进一步地扩大到人的思维能力的设计方面,"使设计能够支持、解放、扩展人的脑力劳动"。在目前的知识经济时代,在满足了物质需求的情况下,人们追求自身个性的发展和情感诉求,设计必须要着重对人的情感需求进行考虑。设计因素复杂化导致设计评价标准困难化。一个个性化的设计作品能否被消费者所认同?新产品开发能不能被市场所接受?在目前,我国大部分企业实力还并不强大,设计开发失利承受力还不很强的情况下,如何系统地、有根据地认识、评价设计,使其符合市场,就需要对设计因素再认识。利用界面分析法,正是使设计因素条理化,避免将人作为"生物人"的片面和走出笼统地说"设计=科学十艺术"的简单误区。      现代的人机工程学和消费心理学为设计提供了科学的依据,它们的成功就在于实验、调查和数理表述,是较为可系的。同样对设计艺术而言,进行设计界面的分析,也要有生理学、心理学、文化学、生物学、技术学学科基础。从理论上来说,它要直接建立在信息论和控制论的基础之上。相对于机械、电子设计和人机设计,以往人机界面设计把握了技术科学的认识和手段,忽视了人文科学观念与思想。它的界面设计只能存在于局部的思考范围内,只成为一个设计的阶段。      有人以功能论来评判设计。"功能决定形态"曾是20世纪上半叶的设计格言,它的提法是片面的。这是因为:第一,功能不是单一的,它包括使用功能、审美功能、社会功能、环境功能等。"过分追求单一的功能会导致将许多重要内容(装饰性、民族性、中间性)被排斥掉"。而且"有些内容并不是'功能'的概念所能包括了的,更何况物质和精神的内容也并不是时时处处等质等量的融洽在一个统一体中,随产品的不同、时期的不同,它们各自的主次地位也随之变化"。在现今信息技术高度发展的时代,情感因素越来越成为设计的主要方面。物质意义上的功能在保持其基础地位的情况下,却日益不能代表情感诉求的表述;第二,按"形态服从功能"而设计的产品,对于不熟悉它的使用者来说是难以理解的,产品要为人们所理解,必须要借助公认的信码,即符号系统;第三,满足同一功能的产品形态本来就不是唯一的,象汽车等成熟的产品,年度换型计划等措施成为商品经济中日益不可避免的现象。社会经济发展到一定程度,才能出现设计的专业需求,而这时人们的基本物质需求已能满足,简单地以物质性功能来决定设计是不恰当的。      相反,设计界面体现了人一物交流信息的本质,也是设计艺术的内涵,它包括了设计的方方面面,明确了设计的目标与程序。   分析      按照设计界面的三类划分,有助于考察设计界面的多种因素。当然,应该说设计界面的划分是不可能完全绝对的,三类界面之间有涵义上也可能交互与重叠,如宗教文化是一种环境性因素,但它带给信仰者的往往更多的却是宗教的情感因素。在这里环境性和情感性是不好区分的,但这并不妨碍不同分类之间所存在的实质性的差异。      1 功能性界面    对功能性界面来说,它实现的是使用性内容,任何'件产品或内外环境或平面视觉传达作品,其存在的价值首要的是在于使用性,由使用性牵涉到多种功能因素的分析及实现功能的技术方法与材料运用。在这一方面,分析思维作为一种理性思维而存在。如果作为一种处理方式来设计产品,则这种产品会使多种特征性(如民族性、纯粹性)因素中性化,如果去除产品商标,就很难认出是哪国的或哪个公司的产品。当然,这方面也说明了产品中存在着共同性因素,它使全人类能做出同样的反应。人的感觉和判断能力有着国际性的、客观性的特征。      功能性界面设计要建立在符号学的基础上。国际符号学会对符号学所下定义是:符号是关于信号标志系统(即通过某种渠道传递信息的系统)的理论,它研究自然符号系统和人造符号系统的特征。广义的说,能够代表其他事物的东西都是符号,如字母、数字、仪式、意识、动作等,最复杂的一种符号系统可能就是语言。设计功能界面,不可避免地要让使用者明白功能操作。每一操作对人来说应是符合思维逻辑的,是人性的,而对机械、电子来说则应是准确的、确定无疑的,这双方的信息传递是功能界面的核心内涵。      2 情感性界面    一个家庭装饰要赋予人家居的温馨,一副平面作品要以情动人,一件宗教器具要体现信仰者的虔诚。其实任何一件产品或作品只有与人的情感产生共鸣才能为人所接受,"敝帚自珍"正体现着人的感情寄托,也体现着设计作品的魅力所在。      现代符号学的发展也日益这一领域开拓,以努力使这种不确定性得到压缩,部分加强理性化成分。符号学逐渐应用于民俗学、神话学、宗教学、广告学等领域,如日本符号学界把符号学用于认识论研究,考察认识知觉、认识过程的符号学问题。同时,符号学还用于分析利用人体感官进行的交际,并将音乐、舞蹈、服装、装饰等都作为符号系统加以分析研究,这都为设计艺术提供了宝贵与有借鉴价值的情感界面设计方法与技术手段。      3 环境性界面    任何的设计都要与环境因素相联系,它包括社会、政治和文化等综合领域。处于外界环境之中,"是以社会群体而不是以个体为基础的",所以环境性因素一般处于非受控与难以预见的变化状态。      联系到设计的历史,我们可以利用艺术社会学的观点去认识各时期的设计潮流。18世纪起,西方一批美学家已注意到艺术创造与审美趣味深受地理、气候、民族、历史条件等环境因素的影响。法国实证主义哲学家孔德指出:"文学艺术是人的创造物,原则上是由创造它的人所处的环境条件决定。"法国文艺理论家丹纳认为"物质文明与精神文明的性质面貌都取决于种族、环境、时代三大因素"。无论是工艺美术运动、包豪斯现代主义或20世纪80年代的反设计,现代的多元化,"游牧主义"(Nemadism)都反映着环境因素的影响。      环境性界面设计所涵盖的因素是极为广泛的,它包括有政治、历史、经济、文化、科技、民族等,这方面的界面设计正体现了设计艺术的社会性。      以上说明了设计艺术界面存在的特征因素,说明在理性与非理性上都存在明确、合理、有规则、有根据的认识方法与手段。      成功的作品都是完善地处理了这三个界面的结晶。如贝聿铭设计的卢浮宫扩建工程,功能性处理得很好,没有屈从于形式而损害功能;但同时又通过新材料及形式反映新的时代性特征及美学倾向,这是环境性界面处理的典范;人们观看卢浮宫,不是回到古代,而是以新的价值观去重新审视、欣赏,它的三角形外观符合了人们的心理期望,这是情感性界面处理的极致。
    展开全文
  • 手机软件界面设计浅谈UI设计

    千次阅读 2010-07-05 12:24:00
    用户界面设计的规范性显得尤为重要。 一、界面效果的整体性、一致性  手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。 1、界面的...

         随着科技的不断发展,手机的功能俞之强大,基于手机系统的相关软件应运而生,手机设计的人性化已不仅仅局限于手机硬件的外观,手机的软件系统已成为用户直接操作和应用的主体,它应以美观实用、操作便捷为用户所青睐。用户界面设计的规范性显得尤为重要。

    一、界面效果的整体性、一致性

        手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。

    1、界面的色彩及风格与系统界面统一 软件界面的总体色彩应该接近和类似系统界面的总体色调,例如:系统色调以蓝色为主,我们的软件界面的默认色彩最好与之吻合,若使用与之大相径庭的色彩,比如大红、柠檬黄,色彩的强烈变化会影响用户的使用情绪,假想你买了一款从外观到系统界面都很满意的手机,操作的时候突然发现内置的应用软件和系统界面不统一,你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?所以我们要知道手机的外观和系统界面已经是由手机制造商根据用户审美习惯定制的,它应该有他们的审美群体,我们要给这款手机做软件就应该有效地利用制造商基于此款手机的审美特征,以赢得喜爱此款手机的用户,使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。

    2、操作流程的系统化 手机用户的操作习惯是基于系统的,我们的界面设计在操作流程的安排上,也得遵循系统的规范性,让用户达到可以使用手机就会使用我们的软件,简化用户操作流程


    二、界面效果的个性化
       是不是我们追求整体性和一致性,就忽略软件界面的个性化呢?整体性和一致性是基于手机系统视觉效果的和谐统一而考虑,个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视的!
    1、特有的界面构架 软件的实用性是软件应用的根本,我们设计应该结合软件的应用范畴,合理的安排版式,以求达到美观适用的目的,这一点不一定能与系统达到一致的标准,它应该具有它所具有的行业标准,例如:证券交易、地图操作等界面特征,需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范,不同功能模块的相同操作区域的元素风格应该一致,让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。
    2、专用的界面图标 软件的图标按钮是基于自身应用的命令集,它的每一个图形内容映射的是一个目标动作,因此作为体现目标动作的图标,它应该有强烈的表意性,制作过程中选择具有典型行业特征的图符,有助于用户的识别,方便操作。图标的图形制作不能太繁琐,要适应手机本身显示面积很小的屏幕,在制作上尽量使用像素图,确保图形质量清晰,如果针对立体化的界面,可考虑部分像素羽化的效果,以增强图标的层次感。
    3、界面色彩的个性化设置 色彩影响一个人的情绪,不同的色彩会让人产生不同的心理效应,反之不同的心理状态所能接受的色彩也是不同的,不断变化的事物才能引起人的注意,界面设计的色彩个性化,目的就是用色彩的变换来协调用户的心理,让用户对软件产品时常保持一种新鲜度,它是通过用户根据自己的需要来改变默认的系统设置,选择一种自己满意的个性化设置,达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术,在手机的软件界面设计过程中,应用这一个性设置可以更大的提升软件的魅力,满足用户的多方面需要!在具体操作实现的过程中,色彩的搭配显得尤为重要,要考虑图标色彩与换肤色彩的色彩反差和效果的统一,以不至于造成花、乱的界面效果。
    三、界面视觉元素的规范。
    1、图形图像元素的质量 尽量使用较少的色深表现色彩丰富的图形图像,既确保数据量小又确保图形图像的效果完好,使图形图像在软件系统中所占数据量尽量减小,提高程序的工作效率。
    2、线条色块与图形图像的结合 界面上的线条和色块后期都会用程序来实现,这就需要考虑程序部分和图像部分的结合,需要自然的结合才能协调界面效果的整体感,所以需要需要程序员与界面设计人员的密切沟通,达成一致。
    展开全文
  • 这是一个简单的Android手机UI设计—“软件市场”界面设计。上方的图片滑动由Gallery完成,最底下的类别分类是由TabHost完成,而在“首页”这个类别内,嵌套了三个SubTab(子Tab)。在其中一个SubTab里放置了自定义的...

    这是一个简单的Android手机UI设计—“软件市场”界面设计。上方的图片滑动由Gallery完成,最底下的类别分类是由TabHost完成,而在“首页”这个类别内,嵌套了三个SubTab(子Tab)。在其中一个SubTab里放置了自定义的ListView。
    PS:这个我是用Android Studio2.3做的。

    界面设计由来: 这是一个手机的“软件市场”设计界面,下面的代码与截图主要是完成它的界面设计。
    这是Android手机的“软件市场”的界面设计图
    我的运行效果截图: 有点丑,看看就好。
    在这里,我给你们分享一个矢量图标库,很好用。
    阿里巴巴矢量图标库:http://iconfont.cn/plus
    这里写图片描述
    源码:
    MainActivity.java的代码:入口类

    package com.example.lenovo.softwaremarket;
    
    import android.app.Activity;
    import android.app.ActivityGroup;
    import android.app.TabActivity;
    import android.content.Context;
    import android.content.Intent;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.view.ViewGroup;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.Adapter;
    import android.widget.AdapterView;
    import android.widget.BaseAdapter;
    import android.widget.Gallery;
    import android.widget.ImageView;
    import android.widget.TabHost;
    import android.widget.TableLayout;
    import android.widget.Toast;
    import static android.widget.AdapterView.*;
    
    public class MainActivity extends TabActivity implements OnItemSelectedListener{
    //定义一个Gallery的适配器
        private GalleryAdapter adapter;
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
    
            //获得TabHost 
            TabHost tabs = getTabHost();
            //新建一个tab并设置它的,Tag,标题,图标,内容
            tabs.addTab(tabs.newTabSpec("tab1")
                    .setIndicator("首页",
                            getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, Subtabsss.class)));//使用Intent来对Tab分页
            tabs.addTab(tabs.newTabSpec("tab2")
                    .setIndicator("类别",
                            getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));
            tabs.addTab(tabs.newTabSpec("tab3")
                    .setIndicator("搜索",
                            getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));
            tabs.addTab(tabs.newTabSpec("tab4")
                    .setIndicator("管理",
                            getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));
            tabs.addTab(tabs.newTabSpec("tab5")
                    .setIndicator("更多",
                            getResources().getDrawable(android.R.drawable.arrow_down_float)).setContent(new Intent(this, NActivity.class)));
            tabs.setCurrentTab(0);//设置初始选中状态为第一个tab
    
        //“软件市场”上方的相册使用Gallery,图片浏览控件
            //定义 Gallery 控件 ,根据ID寻找到相册 
            Gallery gallery =(Gallery)findViewById(R.id.gallery); 
            //初始化自定义的图片适配器
            adapter=new GalleryAdapter(this);
             //绑定适配器
            gallery.setAdapter(adapter);
             // 设置图片之间的间距
            gallery.setSpacing(5);
            //选择监听事件  
            gallery.setOnItemSelectedListener(this);
        }
          /**
         * 更新Tab标签的背景图
         */
        private void updateTabBackground(final TabHost tabs) {
            for (int i = 0; i < tabs.getTabWidget().getChildCount(); i++) {
                View vvv = tabs.getTabWidget().getChildAt(i);
                if (tabs.getCurrentTab() == i) {
                    //选中后的背景
                    vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.m2));
                } else {
                    //非选择的背景
                    vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.m1));
                }
            }
        }
    
      @Override
        public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
         adapter.setSelectItem(position);  //当滑动时,事件响应,调用适配器中的这个方法。
        }
    
        public void onNothingSelected(AdapterView<?> parent) {
            }
    }
    

    GalleryAdapter.java的代码:图片浏览

    package com.example.lenovo.softwaremarket;
    
    import android.content.Context;
    import android.view.View;
    import android.view.ViewGroup;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.BaseAdapter;
    import android.widget.Gallery;
    import android.widget.ImageView;
    
    /**
     * Created by lenovo on 2017/3/24.
     */
    //创建一个 BaseAdapter对象,该对象负责提供 Gallery所显示的每张图片
    public class GalleryAdapter extends BaseAdapter {
        Context c;
        private int selectItem;
        //往Integer[]数组加入图片ID
        int[] imageIDs = new int[] {
                R.drawable.xx1,
                R.drawable.xx2,
                R.drawable.xx3,
                R.drawable.xx4};
        public GalleryAdapter(Context c){
            this.c=c;
        }
    
        //这个属性决定Gallery控件显示多少张图片
        @Override
        public int getCount() {
            return  imageIDs.length;
        }
        //默认代码,想取指定位置的对象,要重定义这个方法中的代码
        @Override
        public Object getItem(int position) {
            return position;
        }
        //默认代码,想取指定位置的ID对象,要重定义这个方法中的代码
        @Override
        public long getItemId(int position) {
            return position;
        }
    
        public void setSelectItem(int selectItem) {
    
            if (this.selectItem != selectItem) {
                this.selectItem = selectItem;
                notifyDataSetChanged();
            }
        }
        //返回值VIew代表每一个显示在Gallery控件中的图片
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(c);
            //取余,让图片循环浏览
            imageView.setImageResource(imageIDs[position % imageIDs.length]);
            if(selectItem==position) {  imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
    imageView.setLayoutParams(new Gallery.LayoutParams(250, 380)); //选中时,这是设置的大一点
            }else {
                imageView.setLayoutParams(new Gallery.LayoutParams(100,200));
            }
            return imageView;
    
        }
    
    }
    

    Subtabsss.java的代码:三个子Tab以及自定义ListView

    package com.example.lenovo.softwaremarket;
    
    import android.app.Activity;
    import android.app.ListActivity;
    import android.app.TabActivity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.SimpleAdapter;
    import android.widget.TabHost;
    import android.widget.TabWidget;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    /**
     * Created by lenovo on 2017/3/26.
     */
    
    public class Subtabsss extends  Activity {
        //定义一个Listview
        private ListView listView;
        //定义一个RatingBar
        private RatingBar sss;
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.subtab);
    
            //以下三句代码,注意顺序
           TabHost mTabHost = (TabHost)findViewById(R.id.mytabhost);
            //TabHost mTabHost = getTabHost();
            mTabHost.setup();
            TabWidget tabWidget = mTabHost.getTabWidget();
    
    
            mTabHost.addTab(mTabHost.newTabSpec("精品推荐").setIndicator(
                    "精品推荐").setContent(R.id.widget1));
            mTabHost.addTab(mTabHost.newTabSpec("最新上架").setIndicator(
                    "最新上架").setContent(R.id.widget2));
    //获得一个布局填充器,可以使用这个填充器来把xml布局文件转为View对象
            LayoutInflater inflater = LayoutInflater.from(this);
            View view = inflater.inflate(R.layout.layout, null);
            final TextView txtCount = (TextView) view.findViewById(R.id.txtCount);
            mTabHost.addTab(mTabHost.newTabSpec("探索发现").setIndicator(
                    "探索发现").setContent(R.id.widget3));
            mTabHost.setCurrentTab(0);
    
            int height =30;
            for (int i =0; i < tabWidget.getChildCount(); i++) {
    
                //设置高度
                   tabWidget.getChildAt(i).getLayoutParams().height = height;
                //设置tab中标题文字,默认为黑色
                final TextView tv = (TextView) tabWidget.getChildAt(i).findViewById(android.R.id.title);
            }
    
            //自定义lsitView
            listView = (ListView)findViewById(R.id.listview1);
            //使用SimpleAdapter,它是扩展性最好的适配器,可以定义各种想要的布局,而且使用很方便。
            listView.setAdapter(new SimpleAdapter(this, getData(),R.layout.mylist,
                    new String[]{"title","info","img","text","sss"},
                    new int[]{R.id.title,R.id.info,R.id.img,R.id.text,R.id.sss}));
    //显示外部资源的话必须要设置ViewBinder,通过ViewBinder的绑定机制来显示网络资源
            adapter.setViewBinder(new SimpleAdapter.ViewBinder() {
    
                @Override
                public boolean setViewValue(View view, Object data,
                                            String textRepresentation) {
                    if ((view instanceof RatingBar) && (data instanceof Float)) {
                        sss = (RatingBar) view;
                        sss.setRating((Float) data);
                        return true;
                    }
                    return false;
                }
            });
            listView.setAdapter(adapter);
       }
     //tabhost标签背景设置
     private void updateTabBackground(final TabHost mTabHost) {
            for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
                View vvv = mTabHost.getTabWidget().getChildAt(i);
                if (mTabHost.getCurrentTab() == i) {
                    //选中后的背景
                    vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.s1));
                } else {
                    //非选择的背景
                    vvv.setBackgroundDrawable(getResources().getDrawable(R.drawable.s2));
                }
            }
        }
    
    //使用List与Map组合取值
    private List<Map<String, Object>> getData() {
        List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
    
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("title", "QQ农场(手机)");
        map.put("info", "龙诹");
        map.put("img", R.drawable.img);
        map.put("text","免费软件");
        map.put("sss",Float.parseFloat(4 + ""));
        list.add(map);
    
        map = new HashMap<String, Object>();
        map.put("title", "机器人塔防");
        map.put("info", "Lupis");
        map.put("img", R.drawable.img1);
        map.put("text","免费软件");
        map.put("sss",Float.parseFloat(5 + ""));
        list.add(map);
    
        map = new HashMap<String, Object>();
        map.put("title", "植物大战僵尸");
        map.put("info", "梁振宇");
        map.put("img", R.drawable.img2);
        map.put("text","免费软件");
        map.put("sss",Float.parseFloat(1 + ""));
        list.add(map);
    
        map = new HashMap<String, Object>();
        map.put("title", "明珠三国");
        map.put("info", "Pipeline");
        map.put("img", R.drawable.img3);
        map.put("text","免费软件");
        map.put("sss",Float.parseFloat(2 + ""));
        list.add(map);
    
        map = new HashMap<String, Object>();
        map.put("title", "黄金矿工");
        map.put("info", "Game");
        map.put("img", R.drawable.img4);
        map.put("text","免费软件");
        map.put("sss",Float.parseFloat(3.5 + ""));
        list.add(map);
    
        map = new HashMap<String, Object>();
        map.put("title", "钢丝英雄");
        map.put("info", "Good Team");
        map.put("img", R.drawable.img5);
        map.put("text","免费软件");
        map.put("sss",R.drawable.sss2);
        list.add(map);
    
        return list;
    }
    
    }
    

    Nactivity.java的代码:为了调试的界面,没有东西放

    package com.example.lenovo.softwaremarket;
    
    import android.app.Activity;
    import android.os.Bundle;
    
    /**
     * Created by lenovo on 2017/3/26.
     */
    
    public class NActivity extends Activity {
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.normal);
        }
    }
    

    布局代码:
    main.xml的代码:

    <?xml version="1.0" encoding="utf-8"?>
    
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#B0C4DE">
        <Gallery
            android:id="@+id/gallery"
            android:layout_width="368dp"
            android:layout_height="wrap_content"
            android:spacing="2dp"
            android:unselectedAlpha="0.6"
            android:visibility="visible"
            />
        <TabHost
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@android:id/tabhost">
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    
            <TabWidget android:id="@android:id/tabs"
                android:layout_alignParentBottom="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
    
        </LinearLayout>
        </TabHost>
    </LinearLayout>
    
    

    subtab.xml的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mytabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout android:orientation="vertical" 
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <!-- 注意FrameLayout\TabWidget标签的位置-->
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_alignParentBottom="true"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >
    
                <LinearLayout
                    android:id="@+id/widget1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    >
                    <ListView android:id="@+id/listview1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
    
                    </ListView>
    
                </LinearLayout>
    
    
                <LinearLayout
                    android:id="@+id/widget2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    >
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="没有最新上架!"/>
    
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/widget3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    >
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:text="探索发现的,没有!"/>
    
    
                </LinearLayout>
    
            </FrameLayout>
    
        </LinearLayout>
    </TabHost>
    

    normal.xml的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这里是个新页面!"/>
    </LinearLayout>
    
    

    mylist.xml的代码:

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="horizontal"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content">
    
       <LinearLayout
          android:orientation="horizontal"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
       <ImageView android:id="@+id/img"
          android:layout_width="100px"
          android:layout_height="100px"
          android:layout_margin="6px" />
    
    
       <LinearLayout
          android:orientation="vertical"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1">
          <TextView
             android:id="@+id/title"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#000000"
             android:textSize="30px" />
          <TextView
             android:id="@+id/info"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:textColor="#000000"
             android:textSize="25px" />
    
       </LinearLayout>
          <LinearLayout
             android:orientation="vertical"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content">
          <TextView
          android:id="@+id/text"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="bottom|right"
          android:textColor="#0000ff"
          android:textSize="25px"
          />
          <ImageView android:id="@+id/sss"
             android:layout_width="100px"
             android:layout_height="100px"
             android:layout_margin="3px" />
          </LinearLayout>
    
       </LinearLayout>
    </LinearLayout>
    

    mylist.xml的listview的布局代码

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/aliceblue" >
        <ImageView
            android:id="@+id/img"
            android:layout_width="100px"
            android:layout_height="100px"
            android:layout_margin="6px" />
    
    
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">
            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="30px" />
            <TextView
                android:id="@+id/info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="25px" />
    
        </LinearLayout>
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:textColor="#0000ff"
            android:textSize="25px"
            />
    
                <RatingBar
                    android:id="@+id/sss"
                    android:numStars="5"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:rating="3.5"
                    android:stepSize="0.1"
                    style="?android:attr/ratingBarStyleSmall"
                    android:isIndicator="false"/>
            </LinearLayout>
    
        </LinearLayout>
    </LinearLayout>
    

    layout.xml子Tabhost中探索发现标签的布局

    <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
    
        android:orientation="vertical"
            android:background="@null"
            android:id="@+id/rlayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >
            <TextView
                android:id="@+id/icon"
                android:src="@android:drawable/ic_menu_mylocation"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="探索发现"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GG"
                android:background="@drawable/gg"
                android:textSize="13dp"
                android:textStyle="bold"
                android:textColor="#FFFFFF"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:layout_margin="0dp"
                android:layout_alignParentRight="true"
                android:id="@+id/txtCount" />
    
        </RelativeLayout>
    
    

    AndroidManifest.xml的配置代码

    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.example.lenovo.softwaremarket">
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
    
            <activity android:name=".MainActivity"
                android:label="@string/app_name">
                           <intent-filter>-->
                               <action android:name="android.intent.action.MAIN" />
                               <category android:name="android.intent.category.LAUNCHER" />
                        </intent-filter>-->
            </activity>
    
    
            <activity android:name=".Subtabsss"/>
            <activity android:name=".NActivity"/>
        </application>
    
    </manifest>
    

    在这次的设计过程中,我发现放入Gallery的图片不能太大,不然会拖慢模拟机或者在真机上调试的运行速度。放入小尺寸的图片就能加快在模拟器运行该程序的速度。

    展开全文
  • 用户界面设计的规范性显得尤为重要。 一、界面效果的整体性、一致性 手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。 1、界面的色彩及风格与系统...

          随着科技的不断发展,手机的功能俞之强大,基于手机系统的相关软件应运而生,手机设计的人性化已不仅仅局限于手机硬件的外观,手机的软件系统已成为用户直接操作和应用的主体,它应以美观实用、操作便捷为用户所青睐。用户界面设计的规范性显得尤为重要。 一、界面效果的整体性、一致性 手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。 1、界面的色彩及风格与系统界面统一 软件界面的总体色彩应该接近和类似系统界面的总体色调,例如:系统色调以蓝色为主,我们的软件界面的默认色彩最好与之吻合,若使用与之大相径庭的色彩,比如大红、柠檬黄,色彩的强烈变化会影响用户的使用情绪,假想你买了一款从外观到系统界面都很满意的手机,操作的时候突然发现内置的应用软件和系统界面不统一,你会有何感想呢?第一感觉不好的东西我们的用户还会去用它吗?所以我们要知道手机的外观和系统界面已经是由手机制造商根据用户审美习惯定制的,它应该有他们的审美群体,我们要给这款手机做软件就应该有效地利用制造商基于此款手机的审美特征,以赢得喜爱此款手机的用户,使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。 2、操作流程的系统化 手机用户的操作习惯是基于系统的,我们的界面设计在操作流程的安排上,也得遵循系统的规范性,让用户达到可以使用手机就会使用我们的软件,简化用户操作流程

    二、界面效果的个性化 是不是我们追求整体性和一致性,就忽略软件界面的个性化呢?整体性和一致性是基于手机系统视觉效果的和谐统一而考虑,个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视的! 1、特有的界面构架 软件的实用性是软件应用的根本,我们设计应该结合软件的应用范畴,合理的安排版式,以求达到美观适用的目的,这一点不一定能与系统达到一致的标准,它应该具有它所具有的行业标准,例如:证券交易、地图操作等界面特征,需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范,不同功能模块的相同操作区域的元素风格应该一致,让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。 2、专用的界面图标 软件的图标按钮是基于自身应用的命令集,它的每一个图形内容映射的是一个目标动作,因此作为体现目标动作的图标,它应该有强烈的表意性,制作过程中选择具有典型行业特征的图符,有助于用户的识别,方便操作。图标的图形制作不能太繁琐,要适应手机本身显示面积很小的屏幕,在制作上尽量使用像素图,确保图形质量清晰,如果针对立体化的界面,可考虑部分像素羽化的效果,以增强图标的层次感。 3、界面色彩的个性化设置 色彩影响一个人的情绪,不同的色彩会让人产生不同的心理效应,反之不同的心理状态所能接受的色彩也是不同的,不断变化的事物才能引起人的注意,界面设计的色彩个性化,目的就是用色彩的变换来协调用户的心理,让用户对软件产品时常保持一种新鲜度,它是通过用户根据自己的需要来改变默认的系统设置,选择一种自己满意的个性化设置,达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术,在手机的软件界面设计过程中,应用这一个性设置可以更大的提升软件的魅力,满足用户的多方面需要!在具体操作实现的过程中,色彩的搭配显得尤为重要,要考虑图标色彩与换肤色彩的色彩反差和效果的统一,以不至于造成花、乱的界面效果。

    三、界面视觉元素的规范。 1、图形图像元素的质量 尽量使用较少的色深表现色彩丰富的图形图像,既确保数据量小又确保图形图像的效果完好,使图形图像在软件系统中所占数据量尽量减小,提高程序的工作效率。 2、线条色块与图形图像的结合 界面上的线条和色块后期都会用程序来实现,这就需要考虑程序部分和图像部分的结合,需要自然的结合才能协调界面效果的整体感,所以需要需要程序员与界面设计人员的密切沟通,达成一致。

    展开全文
  • 软件界面设计

    2012-03-12 10:25:55
    手机界面设计,很详细的理论化的建议和知道,模型图都有。
  • 手机界面设计欣赏

    2019-09-25 12:58:49
    微软亚洲工程院成立于2003年,此后逐渐参与到微软一系列核心产品的研发工作中,对软件的应用界面设计需求随之增多。2005年,微软中国研发集团首席技术官兼微软亚洲工程院院长张宏江博士邀请来自微软总部的Dave ...
  • 虹软手机界面设计.RAR

    2010-08-11 22:59:25
    qt 手机界面设计 什么是智能手机? 智能手机的操作系统, Qt是Trolltech公司的产品,Trolltech是挪威的一家软件公司,主要开发两种产品:一种是跨平台应用程序界面框架;
  • 软件是个简易手机UI界面设计器,可以用来快速简洁的进行手机UI设计,并生成效果图片。 当你在设计手机界面时,产生了1个绝佳的创意idear,但是周围又没有PhotoShop,这时候这个小巧的软件,就能帮助你快速的搭建...
  •  当今科技时代,iPhone已经成为一个领先的移动...我收集了33 优秀的iOS应用程序设计界面为您带来设计灵感 Momento   Groups Epicurious Be Happy Now Pennies Birdbrain Reeder Sq...
  • 一、手机应用软件加载及登录界面设计第一辑 http://m2.moosee.net/viewnews-3025-page-1 二、手机应用软件加载及登录界面设计第二辑 http://m2.moosee.net/viewnews-3032 三、手机应用软件加载及...
  • 感谢@天天阿木 给我们带来的总结。作为一名手机浏览器PM,他从手机界面...在手机界面设计中,若直接把所有内容在一屏内显示,会使界面混乱不堪,丑陋且不可用。我们需要对信息进行有效组织,通过合理布局把信息展示给用
  • PS:本文来自网络,并非原创。因欣赏其设计故誊录到此,以备查阅。...我收集了33 优秀的iOS应用程序设计界面为您带来设计灵感。 Momento Groups Epicurious Be Happy Now Pe...
  • 尽可能的限制文本输入  大多数的手机程序都提供一个文本框来捕捉用户的反馈信息。...    即使是大屏手机用户... 改变输入的方法如滑动以及旋转界面元素  OAuth 登陆插件提供一个更佳的方式去验证身份   案例
  • 软件交互设计 ;...软件界面与交互设计的目标 ;软件界面上存在什么问题 ;不容乐观的现状 ;不容乐观的现状 ;第二章 ;谁来做软件界面与交互设计 ;谁来做软件界面与交互设计 ;谁来做软件界面与交互设计 ;谁来
  • 在android平台下的手机软件界面设计

    千次阅读 2013-07-21 17:01:26
    在MainActivity.java中: package com.example.webo; import android.net.Uri; import android.os.Bundle; import android.app.Activity; import android.content.Intent; import android.view.Menu...import a
  • 软件图形用户界面设计

    千次阅读 2019-12-05 10:27:14
    ##最近被同事吐槽界面丑,仔细的研究了下界面设计问题 帮助用户节省脑力,减少学习成本。 (1)保持界面风格的一致性:看到图标可以看图知思 (2)减少用户的记忆负担:按照正常人惯性思维去做界面交互 (3)软件在...
  • ui界面设计是什么:ui设计常用软件是什么?你都知道吗?近几年UI设计一直在火爆状态中,在外行看来这是一个事少钱多的工作,但是你真的了解ui界面设计是什么:ui设计常用软件是什么吗?不管不顾,什么都不懂就跑去...
  • 相信许多人都知道手机APP是什么了,然而一款让人过目不忘的软件,离不开精心的设计,界面设计是人与机器之间传递和交换信息的媒介,近年来,随着信息技术与计算机技术的迅速发展,市场上出现了多款界面设计软件,...
  • UI软件界面设计经验

    2007-05-27 15:40:48
    UI软件界面设计经验 1、手机软件界面设计浅谈2、UI设计流程探讨3、用户界面设计风格说明4、界面构成要素及特征5、网站设计和图形用户界面(GUI)设计的不同6、网页界面设计7、国内部分人机交互学术机构简介8、一种界面...
  • :本文介绍了目前国内主流手机开发商所采用的软件开发和测试方法的现状,讨论手机平台软件开发 的特点,分析现存方法的优缺点,比较了其与(’ 开发平台的异同。在此基础上,为了提高手机平台软件 开发和测试的的效率...
  • 软件界面设计浅谈

    千次阅读 2008-11-08 17:37:00
    用户界面设计的规范性显得尤为重要。 一、界面效果的整体性、一致性 手机软件运行于手机操作系统的软件环境,界面的设计应该是基于这个应用平台的整体风格,这样有利于产品外观的整合。 1、界面的
  • AlancooperAboutface一书提供了关于设计元素可用性的测试方法:将界面中的元素一样一样的从设计中移走,直到设计的坍塌…尤其是移动互联网设备,因为屏幕小、操作环境复杂、电量等各种条件的限制,我们似乎更有充分...
  • 手机软件界面设计人员的广阔乐园.  搜应用网是中国最丰富的手机资源下载站,为你提供精彩的手机图片.手机应用软件.手机游戏,定制服务手机用户的个性化需求,是广大手机用户.手机开发者.手机软件界面设计人员的...
  • 无论是软件界面设计还是平常的平面设计,亦或者宣传页、手机APP界面的设计,都离不开色彩的搭配,由此可见,色彩搭配工作在设计过程中的重要性。今天就以软件界面设计为例来分享一下在具体设计过程中的要把握好的...
  • 用户界面设计是影响用户对移动VoIP通信软件选择的重要因素之一。从注册登录界面和主界面设计等方面,对以Slzype,Viber,Rebel和阿里通、KC call为代表的国内外主流移动VoIP通信软件进行了比较分析。总结出移动VoIP...
  • 软件是个简易手机UI界面设计器,可以用来快速简洁的进行手机UI设计,并生成效果图片。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,448
精华内容 579
关键字:

手机界面设计软件