请选择 进入手机版 | 继续访问电脑版
在线投稿 文字标题 文字标题 文字标题 文字标题 文字标题
切换皮肤
界面设计中的点线面!设计智造
文/王晓霞 手机移动端界面设计在单纯的视觉层面上看,实际上就是手机界面的版式设计,换句话说,版式设计是否合理是手机移动端界面设计视觉展示的关键。界面设计就是在有限的手机屏幕空间里将:
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F589aa081j00q7zcg7000kc000hs00mim.jpg

①文字、图形、色彩等,根据特定的内容需要进行组合排列,并运用界面版式设计原理,把构思与计划通过视觉形式的语言表达来。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F040a7010j00q7zcg7000tc000hs00l7m.jpg
②手机界面一般都是连续的版式编排设计,要求各个界面之间紧凑的联系起来,特别是要处理好顶层界面和一般界面内的布局与形式的关系。手机界面中无论怎样的版面,最终都是可以简化成点、线、面。点、线、面是平面设计中的最基本的要素,也是所有构成的根本。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F877b3f03j00q7zcg7000pc000hs00jlm.jpg
145bf17ag00q7zcg70005c000hs001xm.gif
点在几何学意义上是以圆点为最基础的形态,它是具象的点。但是在手机界面设计中,点是以抽象形式存在的,它的效果取决于与之共存的其他元素相互之间的比例。在界面设计中,点是点缀丰富画面气氛的元素。点最重要的功能就是表明位置和进行聚集,一个点在平面上,与其他元素相比最容易吸引人的视线。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2Fde79edd8j00q7zcg7000xc000hs00ltm.jpg
单独存在的点总是以一个企业标志或者一个简单图形的视觉形象出现,这都给人以点的视觉印象。往往单独的点都会出现在界面的黄金分割线上,以突出企业形象或者某个产品等形式出现。这种情况下,作为整个界面的主体,都是以简单的纯色背景来衬托该元素,通过这种形式达到加强用户视觉印象的目的。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F030af14dj00q7zcg7000wc000hs00lkm.jpg
当然,除了单点的形式外,还有多点的形态存在,一般多点都是以聚集分散的形式进行组合。聚集的点一般以文字、简单的图形、按钮等视觉形象出现,这些点元素以重复、密集、特异等构成形式法则组合排列,以分散形式组合排列的界面设计中的点元素,存在与手机界面的各个位置,使整个界面看来起更饱满。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F191372d7j00q7zcg70011c000hs00jnm.jpg
3e8c63b2g00q7zcg70005c000hs001xm.gif
线是由无数的点通过运动而形成的轨迹。相对于点而言,线在几何学意义上只有位置、长度。线是最富表现力的视觉形态,直线、斜线、曲线、折线等等,不同的线带给人们的心理感受也各有不同。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F5b26ccd3j00q7zcg70013c000hs00h4m.jpg
①水平直线就会常出现在企业类的比较严谨的、工整的界面中,带给人平静、稳定、严肃的感觉。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2Ffb67f407j00q7zcg7000zc000hs00j5m.jpg
②斜线本身就带有方向感、运动感,具有不稳定性,加上粗细的变化可以产生带有强烈视觉冲击力的效果,因此特别受到设计师的喜爱,各种需要突出主体物的界面设计中,经常能看到斜线的身影。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2Ffacc360cj00q7zcg7001dc000hs00dcm.jpg
③曲线作为女性的象征,带给人柔美、轻快、灵动的感受,能使散乱的版面变得集中。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2Ff803502dj00q7zcg7000zc000hs00ebm.jpg
线在手机界面设计中是不可缺少的元素,起到连接页面、引导视觉、丰富画面的作用,在界面上可以有效的组织各元素之间的关系,除了在版面上有规划内容、装饰、界定空间的作用以外,线还可以引导用户的视线,在界面中加入引导用户视线移动的线元素,就能使用户更多的观察到产品的核心和产品的卖点。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F2eae0143j00q7zcg7000wc000hs00ktm.jpg
d8a1119bg00q7zcg70005c000hs001xm.gif
面在几何学中是线的移动轨迹,面有长度、宽度,没有厚度,强调形状和面积,群化的面能够产生层次感。面的形态是多种多样的,不同的形态的面,在视觉上表现不同的情感。直线移动形成的面具有直线表现的视觉感受特征,例如:矩形、三角形等,具有规整的外部轮廓和严谨的内部结构,能有效提升版面的专业感和务实感。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2Fb10731a3j00q7zcg7000wc000hs00j6m.jpg
而曲线运动形成的面,例如:如圆和椭圆,就会产生随意、舒适、柔美的感受,同时能提高版面亲和力,拉近用户与界面的距离。自由曲线形成的面具有个性鲜明、随意的特点,带给人优雅、温暖的感受。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F733ff92fj00q7zcg7000rc000hs00ium.jpg
面是信息的载体,有分割画面的作用。大的几何图形来做设计能把视觉集中到图形上,是切割画面内容最好的方式。当然手机界面中面的表达形式很多,可以将图片或文字放大,突出细节或局部;也可以通过色彩的变化划分主次版面结构,合理的留白,也是面的另一种存在方式,可以突出主要信息,增加空间想象力。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F318d0817j00q7zcg7000tc000hs00mdm.jpg
在实际的设计过程中,我们发现其实点、线、面是相对存在的,它们之间是相互影响、相互协调、相互转换的关系。我们应充分了解点、线、面的特点,根据用户需求,合理安排点、线、面之间的比例,通过构成元素间的巧妙组合与穿插,设计出具有个性的、信息传递明确的手机界面设计。
?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0330%2F90b898ccj00q7zcg7000rc000hs00m8m.jpg






回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则


    Archiver|手机版|小黑屋|齐聚无忧 |网站地图

    Powered by Discuz! X3.4  © 2001-2013 Comsenz Inc.