Blog

很多朋友仔都喜欢在被窝里玩手机,但为了避免眼睛受到伤害,他们一般都会选择夜间模式。夜间模式虽然不是APP设计的刚需,但良好的夜间模式设计,会让APP设计增加用户的好感,提供用户体验度。 APP设计技巧:夜间模式应该如何设计 技巧一:夜间模式切换方式 ※ 列表开关切换   列表夜间模式开关切换主要放置在“个人中心”列表页或“设置”列表页,通常默认打开的是日间模式,如需要使用夜间模式,只需要点击打开即可。 ※ 图标切换 图标切换常见的有四种不同的放置位置,分别是: ① 宫格布局功能图标   这种切换方式主要放置在“个人中心”宫格功能入口中,默认显示夜间模式图标(表示正在使用的是日间模式),点击后夜间模式图标切换到日间模式图标(表示正在使用的是夜间模式)。 ② 顶部导览栏图标   这种切换方式一般放置在“个人中心”顶部导航栏,切换方式比前两种更直观,适合对夜间模式需求更好的APP设计。 ③ 内容详情页图标   这种切换方式多用于阅读类产品,在详情内容页面可直接在“设置”切换到夜间模式,方便用户长时间阅读时直接切换。 ④ 侧边栏底部图标   这种切换方式一般用在以侧边栏导航为主的APP设计,位于底部靠左区域,方便切换。 ※ 自动切换与提示   自动切换与提示夜间模式,是一种较智能的切换方式,产品会自动设置某段时间内进入夜间模式,或打开APP时弹窗询问用户是否开启夜间模式。这种切换方式非常符合用户体验,但需要按照产品场景决定。 技巧二:夜间模式设计要点 夜间模式一般有两种处理方式: 第一种很简单,只需在界面上覆盖40%-70%透明度的黑色遮罩层,达到降低亮度的效果。这种方式虽然节约开发和设计成本,但效果并不会太理想。 第二种是使用深色界面设计,这种方式能与周围黑暗的环境更加融合,适合夜间长时间使用的APP设计,但开发和设计成本相对较低。下面,网页制作公司将具体介绍深色界面下夜间模式的设计要点。 1. 主体背景色选择 为了保证观看的舒适度,夜间模式一般采用低亮度、低饱和的色彩,最简单的方法就是第一种夜间模式处理方式,直接在界面加上遮罩,强制降低页面亮度。 但是颜色本身就是有亮度,在浅色界面上加遮罩的效果肯定不及本身就是低亮度的颜色,所以我们需要调解色彩的亮度,具体计算公式如下: Y(亮度)=(0.299*R)+(0.587*G)+(0.114*B) Y值一般在10-60的范围内,设计夜间模式的效果会相对较好,因此在选择主体背景色时,尽量选择Y值在这个范围内的深色。 2. 文字颜色 一般来说,深色界面下的夜间模式要保证文字与背景色的对比度在3:1-4.5:1范围内,这样既能保证文字对比不会过于强烈,也可看清楚文字内容。 尽量不要使用纯白的文字颜色,对比过于强烈,夜晚长时间浏览会对眼睛造成一定的压力。 3. 图片处理 为了保证夜间模式下整体对比度的舒适度,对图片等元素可进行降低亮度处理。一般图片颜色与背景颜色的对比度满足在3:7~7:1的范围内,或在图片上加上黑色透明层,透明度范围在40%-50%。 4. 图标处理 图标的处理一般是通过降低高饱和或高明度的图标颜色,从而降低与背景色的对比,具体操作如下: ① 单色图标 处理单色图标颜色时,不需要每个图标都修改明度、饱和度后,切图给开发,这样做成本太高。只需要出两套颜色方案,一套日间颜色、一套夜间颜色,通过修改代码进而修改单色图标颜色。 ② 渐变色图标…

在网站设计工作中,由于各种各样的原因,开发最终完成的视觉还原可能会离设计稿有一定的差距。毕竟与设计师相比,开发对很多视觉元素与间距没有那么敏感。因此设计走查不但可以快速帮助开发找出与设计稿得差异所在,而且还能给到开发细节与差异的调整方案与建议,完成最终产品的高质量交付。 如何做好设计走查的问题? 一、查信息层级 1. 页面表达的意思 在设计页面时,需要注意页面要传达给用户的重点信息。如下面案例:   首屏信息是给用户的第一印象,因此用户打开页面时,尽可能展现出更多用户感兴趣的内容。而此次页面需要突出的时优惠信息,次要信息则放在后面。 2. 页面视觉重点   屏幕尺寸间合理运用黄金比例(斐波那契数列,0.618),可让界面视觉重心更加平稳,视觉更加舒适。同时有助于界面区域分隔,集中视觉焦点,承载更重要的信息,让整个界面布局更加合理。 3. 元素间距符合各层级的关系 页面杂乱无章,其主要原因就是一味地堆砌,导致信息层级分布没有区别。想要页面清晰,有节奏的呼吸感,不妨尝试以下方式:   同类的板块不应被混乱的间距区隔开来,它们应该更集中,并且整体与别的板块区别开来。同理,不仅仅是板块,元素与元素之间也是如此,这样用户可以更加快速地看到自己想要的东西。 二、进行文字规范走查 1. 字体种类的控制   界面如果字体种类过多,就显得不统一且混乱。所以字体控制尽量在2-3种以内,中文字体、英文字体以及特殊数字字体。 2. 字号与粗细控制 字号过多会使信息失去重点,基础字号控制在3种以内,这样就能清晰区分信息的层级。   加粗字体往往是整个界面的视觉焦点,重点文本需加粗处理,注意控制字体加粗的使用,以免造成信息层级的混乱。 3. 行距控制   行距太小不便于阅读,太大就会显得松散,所以控制在1.2-1.5倍的范围是较为舒适的范围。 4. 字体颜色 字体颜色深浅有序能让信息层级主次分明,界面应该根据不同模块以及同一模块的层级需要调整不同的灰度值,并在界面中反复使用,统一规范输出。   一般来说,信息越重要,字体颜色越深。但选择字体颜色时,我们还需要注意产品的实际使用环境,这不仅要考虑室内使用环境,还需要考虑到特殊的室外强光环境。 三、通过设计规范走查图标 1. 视觉比例   由于图标通常都是成群结队出现,彼此间的统一性显得非常重要,却也是常常容易被忽略,可尝试使用图标盒子来规范尺寸。 2. 图标设计要点   设计图标时可重复使用基础形状进行设计,保持整体识别性,这样既能统一大小又有整体感。 3. 图标尺寸 在APP设计中,功能图标大致分成:可以点击的按钮和不可点击的展示图标。   · 可以点击的按钮:常用于导航栏、tab栏、操作栏,常用尺寸为:48x48px、64x64px。 · 不可点击的展示图标:常用于信息展示位置,用尺寸为:24x24px、32x32px。 4. 标签的走查规范…

无论设计哪类型的APP,一旦采用了错误的设计,这将对产品带来致命的结果。对用户而言,不仅要求APP美观,更希望它能够提供优秀的交互体验。正是因为用户对APP的要求越来越高,才使不少设计师将错误设计放大,忽略一些重要的小细节。 盘点那些容易被忽视的小设计 ○ UGC内容未设置举报功能 对于“举报功能”,肯定设计师在设计时都很容易被忽略。而在App Store审核被拒的原因中就有一条是关于“举报功能”的内容:如果你的APP内有发帖等UGC(用户产生内容)功能,必须提供用户协议,并留有内容举报功能,否则就会被审核拒绝。 一般而言,UGC内容都需要添加“举报功能”,该功能通常会有两种展示入口:置于更多图标中;直接置于列表中。具体如下: 1. 若列表当中有点赞、评论等功能时,可将举报功能置于更多图标中。 2. 如果列表中没有其他功能,或以用户感受为中心的审核机制时,可将举报直接置于删除列表中,让反馈属性更明确,反馈项目更细致。 ○ 登录注册时键盘挡住按钮 设计登录注册界面时,设计师容易忽略键盘对界面的影响。当用户输入信息时,键盘就会将操作按钮覆盖,信息输入完后还需要退出键盘,然后再点击按钮,这操作明显不够人性化。 面对这种情况,可通过这三种方案解决:① 预留键盘高度;② 内容滚动;③ 键盘设置按钮。具体如下: 1. 当登录注册信息较少时,可将键盘的高度预留出来,避免键盘挡住按钮。 2. 当界面展示效果较长时,可让设置内容滚动,仅显示输入信息。 3. 将登陆按钮置于键盘中,缩短用户的操作路径,但此方法对一般公司而言成本较高。 ○ 文字在浅色图片上对比度不够 列表设计中,浅色文字在深色背景上显示会非常清晰,但在浅色背景就不容易识别。这往往是设计师在设计过程中考虑不周全导致的,同时也是APP设计中最致命的一击。 以往解决这种问题的方法就是直接将文字加投影,但随着界面风格的变化,这种方式逐渐不适合目前的设计风格。因此现在多采用底部增加不透明度为40-0的黑色蒙层。 大多数设计师在设计时,很容易会跟着产品原型走,因而忽略一些小设计,尤其对于那些考虑不周的新手设计师。因此,各位在设计时多注意细节上的问题,平时也多看有关的教程,这样就能规避问题,少走弯路。

在APP设计当中,导航是区别APP的最重要方式。但这个世界没有完美的导航,只有合适的导航。怎样才能选择到合适的导航呢?香港网页设计公司表示,设计师可以根据具体的场景与需求,去选择最合适的导航形式。 常见的APP导航有哪些? 1. 标签式导航 标签式导航主要分为底部标签导航、顶部标签导航以及滚动式标签导航。无论选择哪种标签式导航,都不要超过5个标签,且里面放置的都是常用且重要的标签,方便用户频繁切换。 2. 分段式导航 分段式导航一般并不适用于一级导航,因此往往会作为二级导航与标签导航嵌套使用。 3. 舵式导航 舵式导航是底部标签式导航的一种变体,但要把最重要的标签放在中间位置,作为用户频繁操作的入口,一般可以用图形或颜色突显出来。 4. 抽屉式导航 隐藏不重要的功能,当单击入口就能将它拉出来,这样做不仅大大减少了主界面中的导航控件数量,还能让导航的核心功能更加突出。 5. 下拉菜单式导航 下拉导航的特点是能显示足够多的条目,但有时候切换起来会比较麻烦,可与滚动式导航相结合,互补优势,实现快速切换的效果。 6. 宫格导航 宫格导航适用于二级导航,能将功能扁平化,充分利用整个页面,在有限的空间内罗列大量的功能。 7. 列表导航 列表导航,又分为垂直列表导航、网格列表导航和轮播面板导航三种,下面我们来看看三者有何区别: 1. 垂直列表导航:适合二级导航或功能层级较浅且功能键切换不频繁的主导航,偶尔也可以用于有多个平级功能,且入口较浅的一级导航。 2. 网格列表导航:适用于二级导航,能在有限的空间内罗列大量的功能,常见种类:规则的宫格列表、不规则的瀑布流。 3. 轮播面板导航:属于横向列表,能把信息藏在页面,且充分利用界面的空间。使用一些选项较少且跳转不频繁的APP,可分为大图展示型和小图展示型。 在APP设计中,导航是非常重要的模块,因此设计师们也会经常在基础导航模式上,不断升级优化以及组合创新。如果你也想为你的APP设计出合适的导航,不妨从以上的常见APP导航形式,根据具体的场景与需求,加以优化和组合。

APP设计怎样做才能增加用户对产品的印象,增加好感和认可呢?随着手机越来越深入我们的生活,不少APP应用程式也逐渐影响着我们的生活,改变我们的生活。但APP市场竞争越演越激烈,要想突围而出,就要在APP产品中加入一些符合调性的趣味设计。具体怎样做,我们一起来看看吧! 一、通过文案来吸引用户 有别于其他APP,小红书点赞还加一个有文案的Toast,里面的文案是随机,却能在不经意间撩动用户,产生惊喜感,让用户对产品留下印象。   通过不同的点赞文案,会让用户主动且期待地去给UGC内容点赞,从而鼓励了UGC更产出更多,也让用户与产品增加更多互动,提高粘性。Toast的位置也设计得相当好,既不会挡住图片,也不会影响用户输入文字。 二、带给用户新鲜感 看到市场上那些大同小异的APP模块时,用户一旦看到有特别的模块或展现形式时,就会觉得非常新鲜且有意思。例如:社交APP Same的消息列表就做得很有新鲜,有趣的卡通插画形象,配上合适的场景文案,一下子就树立产品调性,很符合产品形象,给用户带来深刻印象。   如果产品的调性偏向轻松和活泼,产品画风不建议比较严肃,但可以在页面留白的地方,添加经典的产品插画,增加产品的趣味性和可用性,也可以将产品和公司特色作为切入点和闪光点。 三、打破规则 在熟悉的场景和情景下,带给用户出乎意料的惊喜,能轻易抓住用户的注意力,并产生积极的情感。Imessage发送信息的功能与我们以往用过的都不一样,长按发送按钮,就会进入效果选择区,然后更改气泡的表现形式,或选择背景动效。   在熟悉的界面下,出现意想不到的惊喜,例如:通过全屏动效增加氛围,能提升用户注意力,加深对产品的印象。 四、意料之中的惊喜 百度地图是一款地图工具类的APP,很多时候我们都会将它当成简单的地图工具使用。但当我们在使用的过程中,慢慢会发现百度地图与其他地图工具最大的不同,就是截图时可在上面放自制表情包。虽然很多APP都会自带表情包,但作为工具类APP这样做,超出了期待值以外的功能,带给了用户很大的惊喜,也拉近彼此间的距离。   这些隐藏式趣味功能,有点像游戏里的隐藏福利,一般只有老用户才发现,但它的存在却能鼓励用户继续使用,毕竟能让用户记住,又不断带来惊喜的产品还是很少的。 五、用户一起玩 Walkup作为一个简单的记步数产品,却以画风精美的插画和独特的游戏玩法,吸引不少用户。其实,很多工具类的产品都是我们需要才会使用,否则根本就没有动力去使用这些枯燥的产品。所以在工具类产品加入游戏模式,让用户主动参与,而非“有需要才使用”。     让用户把一款工具类产品当成游戏玩,这样除了提高用户的粘性,同时还能提升用户的停留时间,使产品逐渐成为用户的“必需品”。 大多数熟识的事物会缺少刺激,但太多的不确定又容易产生恐惧,通过身边熟知的事物制造不太常见的惊喜,这样才能让用户更加放心地使用产品。

界面布局样式指,用于区分信息内容,层次版式设计的具体方式。懂得总结和了解常用的界面布局样式,能让设计师快速做好决定,选择合适的设计方式。 界面布局样式有哪些? 样式一:卡 利用“卡”设计界面,对应的就是现在流行的的“卡片式设计”,如:App Store的Today页面。 卡片式设计的三大优势: ① 灵活性 例如:IInstagram 的“推荐用户”模块,利用横向滑动的卡片设计,打破订阅信息垂直展示得限制,从而展示更多信息。   ② 操作性 例如:支付宝卡包利用模仿物理世界真实的银行卡设计,利用用户已有的银行卡查看习惯,让用户快速理解和查看已绑定的银行卡。   ③ 趣味性 例如:探探是一款陌生人社交软件,其主打就是左滑不喜欢,右滑喜欢的体验,凸显自己在同类型软件中的体验差异化,用户的感受更加新鲜有趣。   卡片设计的缺陷: 虽然卡片设计经常呈现出比较好的视觉效果,但如果设计不好就会导致浪费空间,降低效率。 样式二:线 线,就是APP设计中最常见的分割线,在分割线当中可以分为两类: ① 贯穿式:线长度贯穿屏幕,左右边距为零,增强被分割信息的独立性。   ② 内嵌式:线的左右边距留有空隙,有助于信息阅读的流畅性。   分割线设计的缺陷: 界面设计中,分割线设计是界面当中最常用的元素,基本所有APP是没有界面中一条线都不用的产品。尽管如此,使用分割线设计时应注意是否应该使用,和使用时线的颜色,粗细。 样式三:间距 利用「间距」设计界面,对应的是现在流行的「无框设计」,也就是不用分割线,纯粹用间距实现信息的排版。常见的间距排版主要有两类: ① 图片为王 例如: Instagram,爱彼迎,红板报等都是以图片为主,而图片本身的边缘具备分隔的作用。   ② 内容少且有规律 例如:轻芒的「分类页」和「类别首页」,分类页只有一种板式,并横向排版展示,且类别首页只有一屏信息。 卡,线,间距都是产品设计中非常基础的元素,设计师掌握和了解这三个基础元素的实用性,对于版面布局就能驾轻就熟。

目前,APP开发市场比较混乱,加上大多数APP本身的生命周期较短,所以看起来制作简单,入门槛不高的APP开发,其实并没有大家想象中那么简单。不同APP类型的开发时间也会有所不同,那么,除此之外,还有哪些因素会影响APP开发的时间呢? 因素一:行业 基于APP应用开发需求及行业,每个APP开发公司所给的开发时间也会不一样。有些行业较为简单,开发需求不是很大,可能只需要几周的时间就能开发;有些行业比较复杂,APP的开发难度较高,就需要较长时间,三四个月不定,一年半载也说不定。 因素二:系统 现在手机操作系统主要是IOS或Android,当然也有其他操作系统。手机操作系统不同,其网站制作和网页设计要求也会有所不同,APP开发时间也就会不一样。另外,应用市场会针对APP适合的系统,而作出不同的审核要求,这同样也会影响APP开发时间的。所以,如果企业开发的APP应用需要在Android和IOS都可以使用的话,开发时间会比较长;如果只需在其中一个系统上使用,开发时间也会相对缩短一点。 因素三:功能 APP应用开发的时间还与APP应用功能开发要求有关。一般来说,APP应用开发包括前端设计、用户界面、后端整合以及用户管理等内容,而针对这些功能的开发都需要一定的时间。如果APP需要设计较多且复杂的功能,开发时间会相对比较长,几个月甚至更长都有可能;但如果APP的功能相对简单,开发时间也不会太长,几周或一两个月就能完成。 因素四:开发方式 最后,开发APP应用需要的时间还和开发APP应用方式有关,目前开发APP应用方式主要有两种,一种是企业组建团队开发,另一种则是找专业APP外包公司开发。正常来说,同一款APP应用开放,选择APP开发外包公司开发需要的时间会比企业组建团队开发要短。这是因为APP外包公司有专业的APP应用开发团队,每个开发程序都有专人负责,各自分工合作,开发效率自然就会快。 通过以上的介绍,相信各位对“影响APP应用开发时间的因素”已经有个大概了解,企业在开发APP应用的过程,如果清楚知道APP应用的开发进程和流程,这样就能更便利地对项目进行把控和管理。

MENU
網頁設計公司