Blog

UI界面设计如何选用图片?从人体进化角度来看,我们的祖先主要是透过视觉来感知和判断生活,其他四感辅助之。即使出现文字,图像对人类的吸引力依旧很强。并且与文字相比,更能让人类快速轻松地理解和记忆。 图像既然如此重要,在网页设计中同样并不可少。图片能在某程度上决定画面基调,引导视觉流程,降低多段文字信息的枯燥性,提高网页的易读性。 UI界面设计如何选用图片? 一、错误的图片选用方式   左图:无论从商品视觉、调性、细节都不够统一,给人一种山寨盗版网站的感觉。 右图:看起来比较有质感,感觉像是是严肃官方认证的网站。 所以,在同样页面布局下,统一图片的风格,会让UI页面看起来更有“品质保证”。 二、了解图片占比与来源 构思UI页面布局时,首先要了解两个问题: 1. 图片区域与占比; 2. 图片来源问题。 如果页面图片比较多,用户可进行自定义,APP上线后设计可控性会降低,上线效果会不尽人意。   淘宝和网易严选在图片品控上有着不同的视觉感受,这是由于淘宝属于”自营+他营“,即使有图片规范,也难以统一品类和调性;相反,网易严选属于“自营”,会相对更容易把控。 三、 图片的选用问题 1. 是否符合产品气质 在网页设计中,界面的所有设计及元素运用都需要为产品服务,所以图片也不例外。不同类型选用不同风格的图片搭配,这是十分基础且重要的事情。   例如,如果这是美食类APP,头图选用小清新风格的图片显得不够合适,相反选用带有环境食材元素的图片,才会更容易让用户产生共鸣。 2. 是否能清晰表达产品的核心内容? 图片是否主题明确?能否正确无误地传达界面的核心内容?图片会不会被界面其他元素抢去主体视觉,而让用户找不到视觉重点?   漂亮图片有很多,当如果我们仅仅以“漂亮”为基准,就会显得界面非常凌乱。所以确定图片是否符合界面风格,比图片美与否更重要。如果商品角度不一样,饱和度高低不同等,就会形成产品不一致,用户视觉不适应等问题。 3. 图片是否美观 图片是否能表达美好的生活以及美好品质的向往?光影关系是否自然?图片是否高清有细节?   想要网站设计美观,图片是必不可少的。如果图片不够美观自然,反而会让网站不受欢迎。所以,网站图片不可随便选择,要足够美观同时还需具备丰富的信息传达力和情感吸引力。 人类都是视觉动物,所以图片的选择上,我们尽可能使用贴切主题且漂亮的图片,这样才会让界面看起来更加美观,让用户更愿意停留并信赖平台。

好的网页设计重视的不仅仅是美学,而是网站直观且易于使用。以网站主页为例,主页就是网站的门面,好的主页能让用户快速了解网站的主要业务以及其他细节,或者是使页面之间的导航更加清晰,让用户轻松使用网站,以快速获取所需内容。 ● 优秀网页设计的关键要素有哪些? 关键要素一:促进转化增长 网站设计的目的并不是让用户简单地对网站进行访问就可以,而是希望用户快速了解网站后,能进行下一步的操作,如注册、购买商品等。即使用户不会马上做出决定,但往后还是会愿意回到网站。 关键要素二:提高品牌知名度 网站是对外展示品牌信息、产品信息的重要手段,也是让外界全面了解品牌,并愿意与品牌合作的重要宣传方式。如果网站设计能让用户满意,网站将向他的朋友推荐,或在社交平台分享,从而提高品牌知名度,加深用户对品牌的印象。 ● 优秀网页设计的设计原则 1. 向用户自我介绍 ——如果你是McDonald’s的老板,当然就不需要向客户介绍自己。但如果你的品牌并不出名,就应该让用户了解自己所处的位置。 2. 刺激用户采取行动 ——营造迫切感是刺激用户采取行动的最有效策略之一,而且还能有效提高网站转化率。如何营造迫切感,刺激用户消费? ① 稀缺感,人们对唾手可得的东西总不会过多地关注;但对得不到的东西总是耿耿于怀。 ② 规避损失,因为人们不喜欢眼睁睁地看着机会从自己手中溜走。 但需注意刺激用户时,一定要营造真实的迫切感,否则用户会对品牌产生不好的印象。 3. 不断进行使用优化 ——确保整个网站都是易于使用,关键导航元素要放在整个网站突出的位置,方便用户找到。 4. 动态网站能更好地留存用户 ——有些元素需要一定的周期性变化,因此最好遵循用户的意愿,为他们做最好的产品,更好地留存用户。 ● 案例分享 1. Apple网页设计欣赏 Apple除了本身产品过硬的质量,而受到全世界的欢迎,网站设计和产品展示同样吸引了人们的注意。 网站主页信息很小,而且产品页面也只是用简洁精准的语言,展现产品的功能特点。让用户在短时间内就能透过网站获取想要的产品和服务详情,每个产品描述的结尾,还有“号召行为”——购买产品,刺激用户进行下一步操作。 2. Adobe网页设计欣赏 Adobe的产品不仅能帮助我们创建网站,还用官网表明使用它的产品能开发出具有吸引力与激励性的产品。 网页主页包含信息少,并留有大量的空白空间,从而展现出Adobe的本质“使创建变为可能”。此外导航面板除了常规的公司主要产品页面,还有过渡到Blog的选项,以及联系技术支持或产品使用规则,方便用户找到想要的内容。 3. Nixon网页设计欣赏 曾赢得“2015年最佳网页设计”奖项的Nixon,到底有什么过人之处?Nixon让用户花费短暂的时间,就能在主页上选择所有手表的元素(从表带材料到颜色)。 Nixon还舍弃其他品牌“需要收取一定费用,才可以让用户自定义设计手表”的服务。此外Nixon提供了关于表带大小的信息,确保用户知道他能够得到想要的,确保他们在消费时不会产生任何疑问。 参考,不是复制,一味地复制别人网站的特点,会让网站变得不伦不类。因此想要为为目标受众提供最佳的网页设计,就要根据他们的喜好,向用户展示产品独特的品质。

如何提高设计的对比度?对比,即将两个有明显差异,矛盾和对立的双方放在一起进行比较,简单来说就是将页面上两个完全不同的元素放在一起进行比较。当网页设计加入对比,会使形象更鲜明,感受更加强烈。 如何提高设计的对比度? 一. 调整元素大小 如果界面所有元素都相似或对称,那么要创造明确的焦点是非常困难的。具有相同尺寸的元素,即使颜色和形状不太一样,最终可能焦点也会不太明显。 提高设计对比度最简单的方法之一,就是调整焦点元素的大小,让它看起来跟周围元素的大小有较大的差别。用户自然会被这个对比鲜明的元素所吸引,因为它跟其他元素有明显的区别。 二. 添加颜色 利用颜色差异为设计增加对比度是不错的方法,你可以通过明度、色相、色温等方式进行对比。 ① 明度对比 这种方法非常简单,就是深色背景搭配浅色文字/元素,或者浅色背景搭配深色文字/元素。 ② 色相对比 将不同调色板组合一起以使用不同颜色,主要有三种选择: 互补:色轮上相距180°的颜色,如:红绿、紫黄、蓝橙等; 拆分互补:互补色方案的进阶版,用基色和色轮上与互补色相邻的两种颜色; 三原色:指色彩中不能再分解的颜色,如红黄蓝。 ③ 色温对比 即利用冷暖色对比来提高设计中的对比度,如红色、橙色和黄色是暖色;蓝色、绿色和紫色是冷色。 三. 使用纹理和图案 利用纹理和图案来提高设计的对比度同样是不错的选择,例如将粗糙纹理的背景与平滑的前景元素进行配对,会更加突出前景元素的特点。 纹理赋予设计个性,如粗糙颗粒状纹理,会给设计带来复古的韵味;细微的噪音纹理,会给设计创造出自然的变化;照片纹理,则会为设计带来逼真的效果…… 四. 注意对齐和间距 留白和对齐有助于建立组织结构,并在设计中创建视觉层次结构。例如当你在设计包含大量内容页面时,利用留白能将重要元素脱颖而出,并吸引用户的注意力。 此外,拉近相关元素的距离,能让用户知道它们之间的联系,并将它们与其他不同元素区别开。通过这种方法,你可以简单地利用留白和对齐提高设计的对比度,同时还能给你的网页设计注入更多豪华和优雅的感觉。 五. 利用排版 版式对网页设计而言是必不可少的,如果网页设计版式混乱,会让用户不知道从何看起。当然,合理利用版式设计,同样可以帮助你提高设计的对比度,如添加与字体组合、样式和权重的对比。 当你尝试使用多个字体实现对比度时,你必须确保字体能很好地组合在一起,并在视觉上有所不同,如衬线和无衬线的配对,就是一个很好的对比鲜明字体搭配。 此外,你还可使用不同的字体样式,如斜体、缩写或小帽以及字体权重,如轻、普通或粗体等,进行字体的对比。 六. 添加额外元素 合理利用意想不到的元素,同样能设计达到一个平衡的对比。虽然这种对比技巧较难掌握,但你也可以尝试以下几种方式进行对比,如: · 引入不对称元素,打破整齐、对称的网页设计; · 在其他中性设计中使用明亮颜色等。 合理利用对比去强调界面的重要内容,不仅非常使用,而且还能让普通的网页设计看起来更加有趣,还有机会将用户的视线引向屏幕上的特定元素,引导他进行下一步的操作。

如何避免被搜索引擎降权?搜索引擎时不时就会更新调整一下算法,网站排名和收录也时不时高高低低中起伏,这让不少遵循白帽SEO优化规则企业的心也跟着时不时地抽搐一下。 为什么网站会被搜索引擎降权? 原因一:网站改版 网站改版包括网站设计改变、路径改变和内容改变等,都会受到搜索引擎的惩罚。因此当网站进行改版时,更改幅度不要太大,控制在30%左右;如果必须更改路径,要立即执行301重定向;如果更改网站内容主题,最好就是换个域名重新制作网站。 原因二:网站友链 如果友情链接网站受到搜索引擎的惩罚,很有可能自己的网站也会受到牵连,而导致降权或被K。因此我们必须每天检查友情链接,一旦发现有网站受到搜索引擎惩罚,应该及时做出适当的处理。 原因三:外链增长和丢失 1. 很多网站进行外链建设时会突然被搜索引擎降权,这很有可能是因为最近你的网站大量增加外链,尤其是垃圾链接,因而受到搜索引擎惩罚。 2. 关于外链丢失率,一般首页链接丢失比较容易统计,但内页链接丢失就需要通过IIS日志知道蜘蛛爬行量和雅虎反链了解网站外链情况。如果发现网站外链不断减少,应该及时补救。 原因四:网站稳定性 造成网站不稳定的原因主要两种: 1. 网站被搜索引擎降权多是因为无法访问导致,这可能是因为:网站服务器不稳定、黑心服务器托管商用robots文件屏蔽蜘蛛;网站功能不断增加、网站结构不断改变导致网站加载速度过慢等。 2. 网站经常受到攻击和挂马,都会导致蜘蛛无法获取网站数据。 如何发现网站被降权? 1. 网站收录只剩首页:除了新站长时间优化后依然被搜索引擎收录了首页外,突然网站收录只剩首页,基本可以认定网站被降权了。 2. 网站收录完全消失:网站从收录到毫无收录,这就说明该网站已经“完全”被搜索引擎“初步”抛弃了。 3. 网站收录数目剧减:通常情况下,网站收录出现小幅度波动是正常情况,但如果突然出现大量收录减少,这显然是网站被降权的一种表现。 4. 单个或多个关键词排名大幅波动:一般网站一直使用白帽SEO优化手段对网站进行优化,很少会出现这种情况。但如果网站大部分关键词在同一时间大面积排名下降,这明显就很不正常。 5. site或者domain域名不在首位:正常情况,通过site或domain指令域名,网站首页都会出现在搜索结果的首位。所以当网站首页不在第一位时就说明搜索引擎对该网站降权了。 如何避免被搜索引擎降权? 1. 链接审查 如果想网站能够平稳运营,关键词排名没有出现大幅度波动,最好就是“每月审查链接状态”,包括:链接日均增长量、外链的基础位置、链接的相关性、链接展现形态等。 2. 内容审查 进行网站内容更新的时候,很多企业都会经常犯下以下错误: ① 标题罗列关键词,而且非常长; ② 所有的Title标签,都是完全统一的名称; ③ 内容大部分来自于伪原创工具; ④ 关键词密度过密; ⑤ 内容建设的目标没有与时并进。 随着时代的推进,网站内容除了解决用户搜索需求外,还应该突出品牌的建立,尤其是品牌词的搜索量。 3. 站长工具 网站是否出现问题,很多时候可以从站长工具发现,例如: · 网站出现关键词堆积问题; · 关键词展现量出现一定幅度下降或断崖式下降; · 点击量突然暴增;…

关于APP界面设计的排版规则,相信很多朋友随口都说得出来,什么将同属一个集合的元素放在一起,将有关联性的元素靠近些等。但在实际操作当中,却会发现,即使按照排版规则去划分APP界面中的信息,效果依然并不喜人。 下面,香港网页集团将为大家分享,“如何对APP界面设计进行信息划分”的技巧,希望各位阅读后,会对APP布局上有更深入的理解和分析。 如何对APP界面设计进行信息划分? 合理地对界面信息进行划分,能有效组织和整合好信息间的关键,达到一种信息多而不乱的感觉,还能帮助用户了解页面的层次性和内容的组织性。对于内容与内容之间的划分,我们通常会用到留白、分割块、卡片、通栏分割线、非通栏分割线等方式。 ① 留白:增加内容间的间距 技巧:适合有规律性的内容排版,能增加界面的呼吸感 对内容干扰性:弱 ② 分割块:利用颜色差让不同板块产生较强的对比 技巧:适用于有多个板块的内容排版,可通过高亮色让模块间在Z轴上有升起的感觉。注意一屏中分割块不得多于3个。 对内容干扰性:强 ③ 卡片:相当于收纳信息的容器 技巧:一般用于有规律的信息流,能增加页面利用率,区分不同维度的内容,及提升APP的可操作性。 对内容干扰性:强 ④ 通栏分割线:分割线横向贯穿整个页面 技巧:区分更加独立的信息,例如标题和内容的分割。 对内容干扰性:较强 ⑤ 非通栏分割线:用于内容间的区分 技巧:适合内容间的风格,常见于资讯新闻页。 对内容干扰性:较强 各类划分方式的应用场景 看完上述的介绍,我们可以得知根据视觉强弱的比较,可以得出:分割块=卡片>通栏分割线>非通栏分割线>留白。因此,在遇到下面问题时,我们可以采用适当的划分方式,对界面进行布局划分。 案例一:消息列表的布局 消息列表通常都是占据整屏的多个矩形块,而且这些矩形块的内容互不干扰,但是结构相似,能体现出整体性,因此为了减少干扰视觉的元素,可选择视觉干扰强度较小的留白(A)来处理。 如果选择通栏分割线(B)处理,虽然每块都充满独立的味道,但整屏分裂感很强,容易干扰界面的易读性,因此可改为非通栏分割线,能确保信息之间的某种关联性。 案例二:模态框的布局 这里存在相关、同类和包含关系的元素,通过留白(A)的方式来控制,能让将界面变得整洁,同时减少干扰内容的元素,大大提升用户阅读流畅性。 如果选择通栏分割线(B)处理,这里会出现背景面积和分裂感这两大问题。模态框面积小,如果整个页面都是分割线,会影响阅读流畅性及界面的美观性。这里可以改为“保留标题下的通栏分割线,将按钮上的分割线改为非通栏风格线,其他省略。”这样界面就会变得更加整洁干净。 案例三:卡片的应用 卡片的应用场景非常多,很多APP界面都会时常它的身影。到底,卡片有什么好处呢? · 能清楚划分模块内容,归属不同维度的内容,让用户一目了然; · 横向的延展性,为了在一屏里放置更多类型的模块,我们时常会将同类模块横向摆放,节省空间还能凸出界面的整体性。 不同分割方式都有其优点和缺点,以及适用范围,因此在实际设计工作中,为了能更好地呈现内容及功能,千万不能盲目追求设计趋势,选择合适的才是最好的。

关于网页设计的配色问题,网上大多会以配色的基础理论和色彩的感情规律等为主要内容,当然这些基础理论都是设计师们必须掌握的。但掌握之后,我们是不是就能利用配色更好地优化网页呢?掌握了基础后,我们需要了解配色的技巧,才能让网页变得更加出众,具体怎样做?下面我们一起来看看! UI设计需要掌握哪些配色技巧 一、配色原则 ① 一致性:在设计界面过程中,配色方案应始终保持一致性,同时还应与其所代表的品牌兼容。 ② 特殊性:各元素的颜色之间应具有足够的对比度,确保能清晰区分。 ③ 目的性:应该有目的地应用颜色,因为它可以通过多种方式传达含义,例如元素和层次结构之间的关系。 二、各元素的配色应用 #1 顶部和底部应用程序栏 顶部和底部应用程序栏利用色彩搭配技巧,能帮助用户更容易识别,并了解其与周围元素的关系。 1) 识别应用栏 ① 若顶部和底部应用栏使用的是界面主色,系统栏可使用与主色的不同明度将系统内容与应用栏内容进行区分。 ② 若要强调应用栏和其他元素之间的区别,可在附近的组件上使用辅助颜色。 ③ 如果底部应用栏和浮动操作按钮颜色相同或相近,可使用阴影或其他方式进行区分。 2)将应用栏与背景融合 当应用栏颜色与背景颜色相同或相近时,它们会融合在一起,从而将重点放在应用程序的内容而非结构上。 ① 应用栏和背景颜色相同,但滚动时,应用栏会获得阴影,能很好地与页面内容进行区分; ② 应用程序栏、底部导航栏和背景色相同,因此各元素的突出程度较小,内容则更为突出。激活状态使用辅助黄色和阴影,以显示曲面之间的划分。 #2 背景 背景有分正方面,为了很好地区分这两个图层,通常基线后层的颜色使用界面的主色,基线前层颜色使用白色。 #3 工作表和表面 所谓的表面,一般包括底部工作表、导航抽屉、菜单、对话框和卡片等。通常工作表和表面的基准色为白色,其他组件可以透过其他颜色在其他表面之间形成对比度,从而让表面重叠时产生差异。 1) 导航切换 ① 导航切换栏选用“白色+阴影”的形式,与界面内容区分; ② 界面内容使用“白色+蒙版”,降低内容的存在感,增加导航的吸引力; ③ 底部导航栏使用界面主色,切换器使用较深的颜色,选择标签时可使用辅助色,以此突出。 2) 卡片 ① 通常卡片的基准颜色以白色为主,借此传达品牌信息或提高可读性; ② 也可使用界面主色提高可读性; ③ 当卡片的文本或图片出现在图像前,可透过彩色蒙版为文本和图片创建表面,提高清晰度。 #4 按钮和选择控件 1) 在设计界面时,首先应考虑有视觉障碍的人,为确保每个人都能访问网页,应注意按钮颜色的对比度; 2) 选择颜色时应考虑色彩心理学,如红色按钮多用于删除,黄色按钮多用于警示等;…

赏心悦目的动效设计已成为APP设计中不可缺少的部分,目前APP设计中的动效主要分为两类:转场特效和反馈提醒。 转场特效,多应用于页面切换、加载等,通过柔和的过渡效果,让APP操作过程变得更有趣味性;反馈提醒,则是通过界面内元素的动效,增加APP的交互性,同时引导用户更好地完成操作。 那么,APP动效设计应该在什么时候做比较好?   动效设计需要设计师无限的想象,无论设计怎样风格的动效设计,设计师都非常乐意将其设计得有趣有爱且充满个性。但,APP动效设计应该在什么时候做比较好呢? 1. 等待一个“有意义”的理由 面对等待,我们需要耐性。充满个性有趣的动效的确能让用户更加喜欢你的设计,但如果这个动效“毫无意义”地出现,可能会让用户产生疑惑。因此,设计APP动效时,一定要告诉用户,其出现的理由到底是什么。 2. 增加“点击”操作 想让用户点击页面某个地方,但用户常常“视而不见”?增加动效,吸引用户的注意力,让用户不再“有理由”放过“点击”这一操作。 3. 让效果与众不同 页面重点内容与其他次要内容太相似,导致存在感太低?给它来一个不一样的点击效果,提高它的存在感,不让用户有错过它的机会。 如何让APP设计增加动感? 知道什么时候为APP添加动效设计,就需要考虑如何给自己的APP设计增加一丝动感,具体怎样做?下面一起来看看! 1. 将元素改为个性化内容   市面上绝大多数APP都会使用加载动画,为界面增加趣味性之余,同时减轻用户因等待所产生的焦虑感。但如果想要突围而出,让人眼前一亮,可以设计个性化动效得同时彰显产品品牌,增加用户对品牌的认知度。 2. 更换产品的运动方式   除了旋转运动,设计APP动效还可以选择重复、构建、变形、拟物、拟人等效果。其实只要APP动效符合产品定位,为其设计出独特的运动方式,无不是吸引用户注意力,增加用户记忆的好方法。 3. 赋予明显的交互反馈 冷冰冰的点击和出现,往往让用户比较反感。因此为重要元素适当地增加动态效果,如:渐隐渐显,位移,放大缩小,光晕,分布等,不仅能起到很好的引导效果,也能让用户更愿意选择点击操作。 合适的动效设计能让用户在使用APP时不再感到陌生和冰冷,通过瞬间丰富的变化,能给用户带来更好的体验,让他们感到愉悦。但也并非所有动效设计能有这样的效果,要想让APP动效设计发挥到极致,就需要满足产品的需求,同时能匹配用户应用的场景诉求。

对APP设计师来说,最令人沮丧的统计数据之一,就是用户放弃他们下载的APP,甚至有些人刚打开APP就直接放弃。当然,我们无法阻挠用户的思想,要求他们一定要使用我们的APP,但我们可以找出他们放弃使用APP的原因,并加以完善挽留用户,相信很快就能扭转这一局面。那么,用户刚打开APP就退出怎么办? 用户刚打开APP就退出怎么办? 1.利用用户想要的目的信息做强制操作 例如:微博的头条文章,部分文章若要看完整版本,用户必须关注博主才能看到对方的全部信息,否则只能看到部分信息。 其本意是通过利用用户想要得到的信息,做强制操作让用户关注博主,一来可增加博主的粉丝数,二来用户可获取更多相关信息,三来进一步提高转化率。 类似的APP设计,还有百度贴吧2018年版本,若用户需要打开帖子查看时,只能浏览第一页的内容,如果想继续看更多内容,就必须下载APP并登录后才能查看。   还有很多产品设置不同规则解锁更多功能,本质都是“在免费使用基础上,通过要求用户做强制操作,提高产品数据”。 当然,强制用户操作会有很多方面的好处和坏处,UI设计师在设计界面时要考虑其后果及解决方法。 2.提示弹窗提供继续流程的按钮入口 由于产品受到一些规则限制,所以需要使用各种弹框对用户提示。若用户未满足某项条件而无法继续流程,我们应该提供用户完成未满足条件的入口,而不是让用户手动关闭提示窗口,再自行寻找入口。 在用户自行寻找入口时,可能会出现各种各样问题,例如:被其他元素吸引注意力,找不到入口等造成用户流失。 例如:在微信中,如果没有设置支付密码就使用扫码付款功能,那么就会弹出提示框,让我们可以直接点“击设置支付密码”,而不是关闭提示后再点击一系列的操作才能完成这个环节。 同样,如果我们不希望用户完成某些操作,如:卸载电脑上的软件,也可以通过隐藏、增加步骤、视觉误导、默认非选中等阻止用户操作。一般用户会因为有这样的设计而放弃使用该APP,但不得不说也有用户的行为与我们所想的不一样。所以在设计时,一定不要认为所有用户的想法和行为都和我们一样。 3.调整主按钮和关闭按钮的视觉比重 在iOS的设计规范中,按钮位置一般是左右关系,只能通过颜色来强调主按钮的突出性,但现在很多APP显然把设计扩大很多。如:美团APP就是通过调整关闭按钮的位置和颜色,以及背景色块,把关闭按钮和主按钮的视觉比重进一步增大。   视觉引导从PC互联网时代就已经是很重要的提高转化率方式,时至今日仍然有不少产品和场景都在使用,可见这种方式真的挺有效。虽然这种方法很简单,但也要注意不要把它变成流氓设计。 4.用确切的数据告知用户完成程度 一般情况下,APP下载完成后,引导用户使用APP都会包含几个步骤,但很多用户虽然会按照你的引导和设计完成很多操作,填写很多信息,但往往都会倒在最后一步之前。 这时我们应该告知用户,距离完成还差几多步。一般在步骤比较多的流程中,APP设计都会有进度说明,如:1/4、2/4……,但都最后一步,我们最后调整下特殊的文案,而非使用枯燥的4/4。 文字对人的影响很大,同时也能增加用户的焦虑感,让用户觉得“我既然付出那么多时间和操作,如果现在退出会很亏”,利用用户担心损失心理。   以上四种方法,都是日常APP设计中常遇到的问题,在提高APP转化率中其实还包含很多很复杂的内容,如:用户认知、价值传递等,这些都是APP设计师日常需要注意的地方。

互联网兴起,引起“线上购物”的热潮。但网上商店的数量越来越多,要突围而出,除了网页设计要好看,详情页设计也是必修课之一。想要吸引更多用户愿意停留你的网上商店,首先就要给用户带来流畅的视觉体验、直观的产品信息和亮点等。那么,如何把详情页做得足够出彩?页面构图是非常重要的元素之一。 如何把详情页做得够出彩? 一. 详情页的构图形式 目前最被认可的详情页设计形式就是分屏式,这主要是按照手机端设计思维,以一屏为单位制作,最后整合成完整的详情页。其特点能帮助页面提升视觉流畅度和内容识别度,因此不少设计师都会将每屏设计当为海报来制作。 事实上,详情页的构图与传统PC端海报是存在很多不同的,这是由于目前越来越多用户选择手机端购物,因此详情页设计也会更偏向于手机端,以竖向构图形式来设计。 那么,常见的竖向构图形式有哪些?   以上三种构图形式不仅在详情页中使用的频率特别高,而且还兼顾手机端很多必要点,如:视觉流畅度、整洁度、辨识度,以及用户的接受度等。设计详情页时,构图和版式方面不必特别复杂,干净整齐的画面反而更有利于视觉表达,及手机端的显示。 除了上下构图形式,左右构图形式同样能够设计出优秀的详情页。一般来说,文案在配图下半部分的构图形式,在使用上较难控制,因此很少设计师会选择这种模式。当然,如果你想给用户有眼前一亮的视觉感受,这种构图形式无疑是不错的选择,但需要注意,这类构图不宜多用,在整个详情页中出现1-2个即可。相反,左右式配图+文案的形式会更为常用且更容易把控。 可以说,详情页设计的构图形式其实并不难,主要把握以上介绍的六种构图形式,装饰元素选材方面不必太多太复杂,只要选取其中1-3种交替使用,便足够应用于日常工作。此外,构图形式还可以分为:全屏、半屏、透明图,具体情况需根据配图的留白、重心、美观度等,灵活运用即可。 二. 合理选取设计素材 现实生活中,设计素材有很多,但这次主要说说常见的三种,包括:手势、植物、肌理。这三种元素如果运用得好,会让详情页变得更加出彩,视觉表达上也会更生动且有说服力。 1. 手势素材(如:拿、托、指等关于手方面的动作) 在视觉上,手势能让画面变得更加生动,富有立体感和层次感,能让画面变得更加饱满;对用户来说,手势能让他们更能体会到产品的真实性和可操作性,对交易的达成和加深用户对产品的了解也极具说服力。 2. 植物素材(贴合自然、清新、现实及生机的主题) 植物素材,相信大家都不陌生,而且在很多网页设计和详情页设计都会出现,装饰性也非常强。注重植物与主体的层次关系,能让画面变得更饱满,但需注意植物的运用不能胡乱使用,而是根据画面的氛围和文案紧密相连,形成很好的呼应和装饰作用。 3. 材质素材 关于材质素材,小编就不多说,因为在很多关于网页设计的内容上,都会有提及到。材质素材对提升作品细节感、层次感、出彩度以及饱满度都有很大的帮助,如果想让详情页更富有质感,不妨试试材质素材。 三. 抽象名词具体化 最后,我们一起来看看“如何通过设计手法表现出抽象”,例如:风、声音、温度等。 利用装饰性元素,通过视觉手法将抽象化名词表现出来,这对于用户理解的难易程度及视觉出彩度都有很大的提升。如果产品详情页出现1-2次这样的处理手法,会让画面变得更加生动且形象。 另外,若文案中出现LOGO、数字和英文等,也可以通过视觉手法表现出来,这会让详情页版式变得更加活跃,同时对提升设计感也有很大的帮助。 详情页设计中最主要的两点就是视觉的流畅度以及文案辨识度,若想提升设计详情页的能力,不妨多找些不错的详情页,按照文中尝试分析,并落实到工作中灵活运用。 记住,详情页设计构图及文字排版不宜太过复杂,一款详情页一般有2-4屏出彩即可,最好能形成一定的对比,让画面带有一定的冲击力,减少用户对详情页出现视觉疲劳之感。

自微信推出小程序以来,历经初始的暴热,到中期的低迷,再到现在继续火热,可以说微信小程序正逐渐改变着我们的生活。虽说小程序具备无需安装、无须卸载、触手可及、用完即走等优点,但在体验方式及界面设计,看似与APP没有太大区别。这不仅让人存在疑问,到底微信小程序和APP有何区别?同时也让不少企业思考,到底用微信小程序好,还是设计APP好? 微信小程序和APP有何区别? 区别一:诞生时间 APP是手机进化进入智能手机时代的产物,其发展至今已超过10年历史。APP的出现加速了互联网从PC时代逐渐向移动时代靠拢,为用户提供各种便利。 小程序是腾讯公司推出的基于微信APP的应用程式,其诞生于2017年1月。由于小程序注重程序功能的应用,有连接万物的可能性,因此它的发展对未来物联网的发展领域有着较大的空间。 区别二:用户群体   由于小程序是基于微信平台的应用程式,因此其用户群仅限微信用户;相反,APP设计完成后,会在各大应用市场上架,面向全球所有拥有智能手机的用户,因此从用户群上来看,APP的用户范围会更广。 区别三:下载及安装 APP需要通过下载、安装后才能使用,由于下载包占用手机内存空间较大,若手机配置不足,会经常出现无法下载、系统反应慢、操作卡等现象。 小程序则无需下载安装,只需通过微信主动搜索或扫描二维码,便可加载使用,响应速度快,且占用手机内存空间小。 区别四:开发成本 安卓系统和iOS系统都是目前手机主流操作系统,但由于两者存在一定的差异,因此APP开发时需使用不同的开发语言,设计出能解决系统兼容性问题的不同版本。同时APP开发还需考虑不同尺寸手机的适配问题,开发成本相对较高。 微信小程序的开发技术类似HTML,只需开发一个版本便可适配所有手机,所以从总体上来看,小程序的开发成本相对较低。 区别五:引流推广 APP需要用户主动下载,推广难度较大,但胜在APP内部功能架构、推广拉新内容由APP运营全权把控,因此推广方式多,且不受限制。 小程序背靠微信,基于庞大的微信用户量,并且活跃指数比较高,引流效果相对较高,加上小程序可与微信公众号互通跳转,降低了推广难度,提高了小程序的活跃性。但由于微信对小程序设定了很多条条框框,尤其是流量获取方面,很多营销策略都受制于腾讯政策要求,自由度相对没有APP推广那么高。 区别六:产品定位   原生APP内存不受限制,内容框架可因应产品定位随意增减、发挥空间大,无论多复杂的应用都能一一实现。 小程序算是微信中的一个“功能”,内存大小受微信限制,在功能架构上设置会较为简单、轻量。此外,小程序发展时间较晚,大多数企业都是先有成熟的APP后,为了抢占微信的生态流量,再研发相应的小程序。内存限制和上架平台属性的不同,导致两者的内容框架及结构都不同,通常企业会将APP中现有的内容版块进行删减重组再迁入到小程序体系,以满足适合微信生态圈的小程序产品。 区别七:基础框架 移动端产品的设计规范和原则大致相同,但因为受制于微信小程序框架,小程序设计与APP设计在表现形式上会存在一定的差异: 1. 顶部导航栏   在APP设计中,整个界面是可以自定义的,所以顶部导航区域不受限制,设计上自由度非常高。 小程序导航栏样式有限制且不可更改,但背景色可自定义。不过随着小程序的逐步更新,导航栏除了“胶囊”icon的位置不可变,其余也是可以自定义的,只是相对来说比较麻烦。 2. 底部标签栏   原生APP产品中,标签栏经常会看到不同的表达形式,非常生动有趣,且容易吸引用户的注意力。 但小程序产品受制于微信框架的限制,Tab切换形式通常比较单一,大多使用常规切换方式,且不会有动态效果。 3. 弹框   常规APP中,弹框的优先级是最高的,会强制用户阅读弹框内容,且大多需要手动关闭,才能执行其他操作。 小程序则是导航栏与标签栏的层级最高,弹框不能置于最顶层,用户可点击标签栏切换不同界面。 4. 引导页 / 闪屏页 新用户使用APP时,最先看到的不是APP主界面而是引导页,这主要是让用户对产品属性有一定的感知。此外,日常启动APP也会经常看到一些闪屏页,主要展示广告、节假日问候等。 但小程序则没有引导页和闪屏页,这在产品推广和情感温度的表达上就会差一些。 5. 消息推送 APP会经常给用户推送消息,这虽然能提示用户打开应用,增加产品活跃度,但同时也会对用户造成一定的干扰,让用户感到厌烦。 小程序不允许给用户推送信息,仅能回复模版消息,这从不打扰用户的角度而言,产品体验相对较好。 区别八:用户体验   ① 打开方式:原生APP直接下载在用户手机桌面上,只需一步就能打开;常用小程序入口虽在微信首页,但需通过下拉才能获取,若非常用小程序,还要慢慢找才能打开,打开方式相对麻烦。 ② 流畅度:APP对界面切换的流畅度和加载数据的响应速度不错;小程序虽然流畅度也不错,但切换界面层级较深,加载动态数据有时会比较卡。 ③…

MENU
網頁設計公司