首页 > 网站 > WEB开发 > 正文

龙湖天街app UI界面设计的视觉之路

2024-04-27 14:40:48
字体:
来源:转载
供稿:网友
龙湖天街app UI界面设计的视觉之路 三联教程

  龙湖北城天街的app视觉设计部分终于收尾,从最初的版本到现在已经发布的版本,中间经历了种种蜕变,今天做一个回顾和整理,记录这次的经验和心得。

  赏心悦目的视觉设计是app品质加分的砝码。一个app在整个逻辑架构清晰合理、设计出色的前提下,如果能给大家展现一张漂亮而生动的脸蛋那就再好不过了,秀外慧中的美女总是得到更多的青睐。针对客户的气质来确定基本的配色和风格:龙湖是一家全国知名的地产公司,“天街系”是龙湖的商业旗舰产品,由大型高档百货、餐饮、娱乐等各种商业形态组成。 城市化、 现代化、时尚化、精品化是我给它的定位,界面也应该是走这种风格。

商户页面的三个版本

  与客户的良好沟通应贯穿项目始终

  配色部分经历的波折比较多,由最初的红色加灰色到中间的龙湖logo色系,再到最后深灰和近白色,之前由于没有与客户建立起沟通渠道,造成了大量的资源浪费。

  设计一个简洁大方又生动活泼的ICON,视觉元素的数量要做减法,质量要做加法

龙湖天街App Icon进化之路

  icon 的设计使用了龙湖北城天街已有的logo,最初我尝试了把这四个彩色的圆形放在一个有材质感的背景上,但是出来的感觉并不好,比较平淡。后来分析了龙湖本身的气质是偏年轻时尚化的,icon的视觉应该是干净明朗充满青春活力。这和苹果的设备本身的气质也很相似,我决定就在这四个彩色圆形上做修饰,让它看起来精致清爽。既然不加其它元素进去,就必须让logo来出彩,给它加上晶莹通透的水晶质感,logo就立体鲜活起来,再配以淡淡的浅灰作为背景,它有了明亮的色彩和亲切的气质。

  细节决定整体的品质

一个好的视觉设计可以是恢宏大气的,也可以是温馨雅致的,不管是注重材质的实景风格,还是率性写意的涂鸦风格,细节的处理展现出的是品质的高低。小到一条有虚边的边线也会让品质大打折扣,app的视觉设计必须精确到像素级,要确保界面中的每一个像素点都完美无缺。

app的视觉设计必须精确到像素级

出现虚边的情况总教人尴尬,除了反复地将图片放大来检查以修正虚边之外,还要感谢photoshop形状工具有一个Snap to Pixels功能。

snap to Pixels

  图文排版要考虑的不仅仅是漂亮,还要考虑用户的视觉感受和页面的容量

  按钮要多大?文字选什么字号?界面的布局是否合理?如果这些问题让人困扰,除了请教有经验的前辈,实践也能出真知。把设计的界面导入到设备上,用眼睛看,用手指去测试,看是否可以不费力地看清屏幕上的文字,看界面的布局是否让人感到舒服。用这个方法测试, 看是否能准确地点到目标区域 。我发现在iphone界面上字号在22以下的hei字体和ipad界面上12以下的hei字体的文字看起来就很吃力了,应尽量避免使用这样小的字号。那么是否字号越大就越好?在这个app的商户页面,要在商户的logo旁边写上商户的名称,最初用来做demo的“百丽”只有简洁漂亮的两个字,使用60号的hei字体真是再漂亮不过了。不过很快发现商户的名称有很多长串的,最长一个 护肤中心的名称有12个字之多,所以我以这个最长的名称作为参考对象,测试后选择了40号的hei体。

字号的大小不仅仅要考虑美观

  一个优秀的设计是在倾听客户、理解项目的基础上才有可能建立起来的,简单清晰、有人情味儿的逻辑架构是判断设计成功的标准,与团队成员的默契合作也是必不可少。植根于用户体验的设计,一定要把自己当作产品的用户,从一个用户的角度去思考,这样才能评估出产品是否优秀。

  #重庆龙湖北城天街#App是彩程为重庆龙湖地产打造的专属品牌商圈类App,通过它你可以了解到重庆龙湖北城天街最新活动、商家折扣、优惠券和其他相关信息。目前iPhone版已在苹果应用商店上架,欢迎下载。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表