-
UI设计和网页设计的区别?
UI即UserInterface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。也就是说,UI设计做出来的东西是和用户有互动的,以下是网页UI设计和APPUI设计的一点区别:APP:展示效率低,在移动端,展示面积比较小,展示效率也比较低,用户的耐心不佳,必须重点突出。网页:展示效率高,在PC端,展示面积比较大,展示效率也比较高,用户的耐心比较好。APP:更看重交互,手指触摸范围更大,较难精确控制点击位置,没有hover等操作因此版面要尽量干净,合理的手势操作,配合手势呼出“藏”得更深的界面。网页:更看重版式,展示比较丰富的内容,也适合在一个页面里安排较复杂的操作因此网页对布局排版要求比较高。APP:有“范”可循有“范”可循,移动端的设计具有更严格的规范要求。针对不同平台的应用设计,谨慎地遵循平台规范有助于降低用户的学习成本,也是优秀体验的重要保障。
-
关于网页设计的小技巧
设计网站要注意两个要点:整体风格和色彩搭配。风格网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。风格(Style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。色彩搭配无论是平面设计,还是网页设计,色彩永远是最重要的一环。当我们距离显示屏较远的时候,我们看到的不是优美的版式或者是美丽的图片,而是网页的色彩。网页配色小技巧:1.用一种色彩:这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感;2.用两种色彩:先选定一种色彩,然后选择它的对比色;3.用一个色系:简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。在网页配色中,还要切记一些误区:1.不要将所有颜色都用到,尽量控制在三至五种色彩以内;2.背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。
-
网页设计字体大小
你网站上的正文字体太小。虽然桌面显示器和手机屏幕的尺寸在增加,但是机身字体似乎在缩小。虽然他们的原始尺寸是一样的,但感觉上他们比以前更小。今天我们来研究一下网站字体大小该怎么用,这样用的好处有哪些?小字体的网站设计是老派概念。正文字体尺寸使用12pt的想法几乎可以追溯到互联网和数字出版的第一天,当时文字处理器的默认大小是12pt。那时屏幕也小的多,而12pt的文本在距你眼睛几英尺的地方也可以很好的阅读。1.阅读更容易可读性是一件大事。你为什么设计一个用户难以阅读的网站?第一点是在Web上放弃对正文字体的纯数值度量。无论你的字体是12pt还是16pt或22pt,如果无法读取,这些都不重要了。(字体大小不是通用的,随着字体的不同而不同。)正文应该与屏幕上的其他内容相称,便于用户可以从远处看到。一段时间的标准是,单列中的每行45到60个字符(包括标点符号和空格)是大多数读者的理想长度。因此,你需要考虑最常见浏览器的尺寸、所使用的列的宽度以及适合该范围的文字大小。记得调整相应的断点。对于较小的屏幕,范围更紧密,大多数人都认为较大的字体更好。(行数范围的一半。)诀窍是创建一个适合阅读的刻度。你要处理的文字尺寸越多,这就越重要。在逐行阅读时,太宽的字体让人难以集中精力;太拥挤导致阅读时眼睛移动太快,没有一个很好的节奏。2.使设计更直观字体的大小有助于网站设计的整体可用性。如果所有字体按比例缩放,大字体可以帮助其他用户界面元素(如导航链接或按钮文本)尺寸的调整。它有助于整体流程。大字体还可以帮助你更好地决定内容以及有选择性的进行编辑,这对用户来说是一件好事。这种精简有助于将最重要的元素呈现在设计之上。请记住,用户的关注时间很短,那么他们需要了解的设计和如何与之交互的一切都必须一目了然。设计中的一切都将受益于重新思考字体尺寸,因为它们共同拼成最终的产品。所有编辑和重新思考如何放置的部分可以提高可用性,因为你花时间来评估设计中的各个元素,而不是像往常那样按照相同的方式摆放所有的东西。3.减少疲劳用户疲劳是一个真实存在的问题。大多数人整天都在看屏幕,浏览手机、玩游戏、平板电脑、在电脑上工作或看电视。他们的眼睛已经很疲劳了。大一些的字体可以帮助减少一些看屏幕的疲劳。屏幕疲劳的另一个常见来源是移动设备,用户必须通过屏幕获取元素。大手机正在减少拇指容易触及的区域,但较大的元素和字体可以帮助解决这个难题。变大字体和其他用户界面元素是很重要的一个原因是,因为它有助于调整视觉显示与物理显示相匹配,从而为用户提供更多的舒适感。4.增加视觉冲击力你希望你的网站设计可以让用户产生强烈的第一印象。较大的字体比较小的字体更具有强烈的视觉效果和冲击力。大字体更容易被阅读。这些策略都有助于持续地吸引用户的注意力。使用大一些的字体的意外后果是设计中的其他元素都可能变大。大字体有助于你在设计中创造更多的空间。更多的空间通常会创造出更舒适的用户体验,也增加了对比的元素,有助于将吸引用户到设计的部分。大一些的字体和增加的间距是大多数用户不会看到或谈论的元素,但他们会意识到。这种体验是很容易实现的,希望可以让网站数据像网站驻留时间和访问者数量一样上升。所以16px的正文字体太小了。我同意这一说法。尝试18,20甚至22pt大小的文字。即使起初看起来很尴尬,但你会发现它很容易阅读,很容易理解,它让内容感觉不那么强烈。使用户用起来更方便,他们会感谢你并在你的网站上花费更多时间
-
20个惊艳而全面的优秀公司网页设计
在大量的动态效果和各类手段的加持之下,界面越发的惊艳,统计数据加持之下的信息的呈现方式足够突出,相当优秀。以往正规而严肃的内容在设计师和艺术家的润色下,开始表现出令人振奋、充满娱乐精神的一面,数字化多媒体的加入则让原本单调枯燥的数字焕发出不一样的生命力,带你开始一场华丽的冒险。动画、插画、视频、字体、图标等等各种各样的元素共同协作构成这些复杂而有机的“年度总结”页面。今天的这些网页设计都是这样的优秀作品,它们功能并不复杂,但是展现形式参差多态,样式多变,时尚多样,又原创独到。喜欢就收藏了吧。YearinMusicbySpotifyCampaignMonitor的总结报告借助各种信息图元素将传统的数据以更新颖、更易于解读的方法展现出来。由于动态设计的加入,让页面不再是静止的,微妙的细节呈现让整个页面更富有活力。YearinReviewbyBehance在线视频行业巨头Youtube的年度总结绝对是不容错过的!和其他的总结页面不同,Youtube的年度总结干脆就是一个视频,虽然只有短短的7分钟,但是内容引人入胜,并且充分体现了这个平台的独特精神。Tumblr’sYearinReviewFiverr的年度总结看起来似乎并没有什么太过特殊的地方,但是横向的布局别具一格,看起来有趣又引人入胜。这个团队的设计师善于使用大量互补的图形素材来呈现数据、讲述故事。他们的设计会让你会心一笑。Alookbackat2015Panda的设计团队以插画和微妙的方式来设计了总结页面,使得整个页面让人想浏览下去。浏览过程中,设计师有意识地将一个个关键的数据和时刻逐个呈现出来,并且一直紧紧抓住用户的注意力。AVeryEarnest2015ImmersiveGarden的年度总结的特殊之处在于它强大的交互性,它的设计充满了实验性,无论你是在PC上浏览还是在移动端设备上浏览,都会让你充满了点击和操作的欲望。
-
帮你发掘高素质图标的50个优质网站
对网页设计师而言,图标这样的素材总是多多益善的。高品质的图标总能让网页设计项目事半功倍,网页设计师也可以将注意力集中到更重要的地方。今天我们整合了50个免费的的高素质图标站点,让你再也不用为没有图标用而烦恼,不论是设计网页、应用还是制作信息图,图标信手拈来!对网页设计师而言,图标这样的素材总是多多益善的。高品质的图标总能让网页设计项目事半功倍,网页设计师也可以将注意力集中到更重要的地方。今天我们整合了50个免费的的高素质图标站点,让你再也不用为没有图标用而烦恼,不论是设计网页、应用还是制作信息图,图标信手拈来!当然,小图标本身的应用范畴远不止于此。社交图片、名片设计、幻灯片设计、横幅标语、海报设计,等等等等。信息的呈现并非离不开图标的点缀,但是图标的加入能用约定俗成的图形更加高效地传递出信息的属性,在视觉上也是极为直观有用的元素。闲话少叙,我们开始看看这些网站各自都有什么特点~01.SmashingMagazine作为老牌设计博客,SmashingMagazine会时常推荐最有修的图标合集,这些合集覆盖各种格式,经久耐用。02.FreepikFreepik内含大量设计素材,图标只是其中的一部分。这里的图标素材基本都是免费的,不过在使用之后需要注明出处。03.Gravual如果你的个人项目需要图标,那么Gravual会为你提供两套精致的线性图标,如果是商用最好还是和原作者沟通一下。04.FlatIcon这里有着最大的免费矢量图标,这个项目和Freepik是同一个人发起的。FlatIcon的不凡之处在于,你可以将图标转化为图标字体下载下来。05.BehanceBehance自不必说,专业设计师的集散地。这里的图标设计绝对是首屈一指的,在这里找灵感、找素材绝对是靠谱。06.WebDesignFreebiesWebDesignFreebies这个网站搜集了来自互联网各个角落的图标素材。07.CaptainIconCaptainIcon的图标漂亮,免费,而且是矢量的,下载的时候有EPS、PSD、PNG、SVG和Web字体格式可选。可以个人用也可以商用,不过需要注明出处。08.GoodStuffNoNonsense正如同名字所说的,这个网站不废话直接上干货:全是重新绘制的图标,免费使用,无需声明。09.DeviantArt老牌设计师社区DeviantArt拥有近20万免费的图标可供下载,有些图标的使用是需要声明的,使用的时候稍加注意。10.Dribbble现象级设计师社区Dribbble就无需详细介绍了,这里有着大量的精致图标设计。不过由于许多设计师并没有给图标以正确的标注,很多时候你需要自己去发掘一些优秀的图标。11.BestPSDFreebiesBestPSDFreebies搜集了来自全世界的优质PSD,你可以在这里直接下载整套的图标合集,非常省心。12.Iconfinder在Iconfinder搜索图标是一件很简单的事情,你可以在成千上万的图标中翻找你心仪的图标。在这里下载图标的时候,有多种尺寸和格式可选。13.GraphicBurger如果你在其他的地方找不到靠谱的图标,那么你应该来GraphicBurger找找看,这个站点可以直接下载多种不同格式和尺寸的图标。14.DesignbeepDesignbeep其实也是一个精于搜集整理的网站,如果你想在一个站找到大量高品质内容,那么这个网站就够了。这里的资源大多数整理自Freepik和Behance,绝对有品质保证。15.PixsHubPixsHub将来自互联网的图标素材进行了精心整理,不过考虑到用户需求的差异,图标进行了分类。在查找图标的时候记得注意。16.OxygennaOxygenna是典型的免费素材站,格式齐全,安心使用。17.Dafont在Dafont你能找到超过50款免费易用的图标字体,可以轻松下载使用。当然,别忘了版权声明。18.FreeGoodiesforDesigners这个站为设计师提供了大量的PSD、SVG格式的矢量图标,可以轻松地用于Web项目。19.FreebiesbugFreebiesbug搜集了最新的免费图标素材,你可以在任何需要图标的时候来这里寻找合适的素材。20.VecteezyVecteezy的网站中矢量图标素材几乎占了60页,可以说这个站是你搜集图标过程中必去的网站。21.IconmelonIconmelon网站设计精美,易于搜索,图标品质也非常高。你可以通过网站的帮助页快速了解如何使用这个站点。22.PixelsMarket即使是鲜为人知的素材和网站,你也可以在PixelsMarket看到。23.GraphicsFuelGraphicsFuel提供的图标素材有免费的也有收费的,其中许多都搜集自网络。24.FriblyFribly几乎每天都会更新图标素材,有多个设计师专门为网站提供这些内容。25.Icojam想寻找一个一站式图标解决方案?Icojam就是你的菜,数量多,品质高,而且免费。26.Blugraphic你可以在Blugraphic搜索PSD、PNG和矢量图标,不过这个网站是以Tag为索引进行搜索的,有一定限制。27.IconShockIconShock号称为用户提供“靠谱的免费素材”,网站为用户提供了数千高品质的免费图标,供个人使用。28.CSSAuthorCSSAuthor会每周更新一波当周网络上品质最好的图标。29.CreativeTailCreativeTail也致力于搜集互联网各个地方的图标合集,以全面而著称。30.All-Free-Download看All-Free-Download的名字就知道,这是一个主打免费素材的站,这里有各种矢量的、PSD、PNG等各种格式的图标素材。31.EgoIconsEgoIcons主打的是收费素材,大概有1500多个收费的图标,其中免费的矢量图标大概有100多个。不过这个站点的导航栏指向了几个它的姊妹站,那里面有更多福利!32.AlienValleyAlienValley网站中不只有图标,还有各种各样其他的优质素材!33.DreamstaleDreamstale的免费图标和收费图片的品质都颇为不错。34.DuckFilesDuckFiles提供的图标合集可以免费商用,记得善用网站的搜索功能。35.1001FreeDownloads这个名为1001FreeDownloads的网站以漂亮而好玩儿的扁平化图标而著称。36.GraphicsBayGraphicsBay有着分类明晰,易于搜索的大量优质免费图标合集。37.PixedenPixeden提供了从16×16到512×512等各种尺寸的PNG格式的图标。38.NounProjectNounProject拥有高品质的图标,可靠的搜索功能,便捷的下载功能。如果你想自由使用所有的图标,不妨成为付费会员。39.IconmonstrIconmonstr整体设计简约,网站提供多尺寸多格式免费图标素材。40.FusionplateFusionplate和其他几个网站相似,每周更新一次优质图标。41.DryiconsDryicons所提供的图标漂亮,拥有多种格式,多种尺寸。如果想商用,需要适当付费。42.GlyphiconsGlyphicons的图标多是极简风,网站提供了数百免费的图标,均为PNG格式。43.MrIconsMrIcons是一个大型的图标库,其中包含超过10万个图标,从网页到社交媒体,覆盖全面。44.EntypoEntypo中有超过400个免费图标,可以让你的设计项目事半功倍。图标可以用作个人项目,也可以商用,不过要注明出处。45.EndlessIconsEndlessIcons网站设计简约而优雅,网站所提供的图标均为PNG和SVG格式。46.IconicIconic是一个拥有超过200个图标的开源图标合集,所有的图标都拥有多种格式,可免费商用。47.IcoMoonAppIcoMoonApp是一个漂亮而易用的图标合集,其中包含了4000+精心设计的矢量图标。48.Fontello在Fontello搜寻你想要的图标之后,可以以网页字体的格式下载。Fontello的整体使用体验非常不错。49.IconArchiveIconArchive这个站提供了极为易用快速的搜索功能,其中许多图标是共享的。50.SquidInkSquidInk提供了超过2000个矢量图标,色彩斑斓,创意十足。你可以将其中50枚图标免费用作个人项目也可商用。
-
从六个方面帮你迅速提升网站着陆页的转化率
现在着陆页已经变成了一个更为具体的概念,很多人将它们作为宣传某个特定产品、服务、卖点或特征的媒介,以便用户能更快地留意到、并且更专注地浏览这些信息。这篇文章要讨论的不仅仅是设计问题,而是从设计、市场营销、用户分析、心理学等领域切入,来研究用户心理和行为,从而规划更有效的着陆页设计。一句话科普:「好的着陆页是绿色通道直达,坏的着陆页是迷宫」用户进入某个网站,第一眼看到的就叫着陆页。一个好的着陆页能引导用户快速完成设计师设定的目标,优秀范例参见谷歌(12306其实也不错),失败范例参见大学的正方系统。好的着陆页考验设计师的视觉/文案/心理学/营销等等多方面的功力,每一项单独挑出来都能说个3天3夜,而本篇文章的作用是科普概念+基础流程,你可以从它提到的这六个方面进行横向扩展学习。比如文案:《年度最佳教程!7招教你写出互联网顶尖文案!》、心理学:《超实用的设计心理学!怎么用隐喻设计引导用户?》←这篇文章强烈推荐一下,很通俗地用几个淘宝的案例帮你看懂心理学在引导上的作用。视觉方面,简单的文字也有超多玩法:《经验分享!超实用的文本处理技巧》。一句话科普(WTF?)就先到这,来看文章正文。首先让我们先看看那些经常被问到的问题:一、什么是着陆页?广义来说,着陆页是用户进入你的网站的起始或入口页面,形象地来说,就是用户在这个页面“着陆”。现在着陆页已经变成了一个更为具体的概念,很多人将它们作为宣传某个特定产品、服务、卖点或特征的媒介,以便用户能更快地留意到、并且更专注地浏览这些信息。正是因为这样,很多分析者认为着陆页比普通的网站首页更有效率,也更能实现一些针对性的营销目标。和着陆页的效率相比,网站首页则常常囊括了过多的信息,让用户无法专心,也更容易失去浏览的兴趣。二、什么是转化?为什么它很关键?想要去验证那些以商业和产品、营销和推广为最终目标的设计到底效果如何,转化率是最常用的指标。一般来说,“转化”意味着某个浏览者使用你的网站提供的服务或转变为产品的用户,而在实际情况中,转化会根据不同的网站或其它产品而有不同的定义。着陆页起初源自电子商务,也是登陆页应用最为广泛的领域。而转化率就是所有的浏览者中,有多少比例的人转变成了注册用户并且最终完成了购买行为。如今,着陆页被广泛地用在了各个领域的网站里,转化的定义也变得更多。越来越多的线上产品和服务出现,用户能够在网上完成各式各样的任务和操作,“转化”就可以被定义为任何一个浏览者最终完成了网站期望他们去做的任务,比如:开始使用某个产品订阅网站内容转移到某个特定页面下载App或其它文件提供用户信息回答问卷免费或折扣试用产品浏览资源库去阅读产品详情或服务等等上面的图片是Knost设计的着陆页,它是一个摇滚乐队的网站。网页中不同的模块试图引导用户去做不同的任务,同时避免让用户觉得信息量过大。因此,一个浏览者需要花几秒钟时间浏览整页,然后找到他们想要进一步浏览的区域即可。转化意味着你把一个潜在的被动用户转变成了活跃的主动用户,这些用户不仅仅是浏览网页信息,而是真的去使用了网页上提供的功能,可以说转化率的高低至关重要。着陆页在大多数的商业目的里,都专注于获取更多的浏览者,并提供能够激励用户进行下一步操作的信息。作为一个成功的商人兼广告代理公司总监,JeffEisenberg有一个关于转化率至关重要的观点,十分明智:让业务成倍增长的秘诀并不在于成倍提高流量,而在于成倍提升转化率。很多事实都能证明了他的观点,而且着陆页通常仅提供有针对性的信息,也大大节省用户浏览的时间。三、为什么我们需要着陆页?从上文的例子中可以很容易的得到答案,再举个类比的例子:想象一下,你想去纽约逛一逛曼哈顿,这是你一生的梦想,突然你找到一项又便宜又快的服务能让你去纽约,是不是很棒?你拿起你的行李、带上相机,心中觉得梦想就快要实现,或是其他你想去的地方。这时你又觉得如何?在一个如此大的城市中寻找你想去地方,你在完成这段筋疲力尽的旅程后,或许会觉得不太开心吧。而那些人把你送到纽约,却把你一人丢在市里,让你自己去找曼哈顿在哪儿,这时候你才觉得,直达目标才最好,我想探索新鲜的城市,但不想因为找不到目的地而精疲力尽。那么同样的,作为一个页面的访问者,是不是也希望直达目标,而不是在复杂的网站上浏览太久?这也正是着陆页承担的角色。当用户在外部资源看到特定产品、功能、信息或服务时,然后点击进入到站点,他并不会期望自己需要花大量的时间在首页的一堆链接和信息中去寻找自己想要的产品内容或页面。浏览者除了想要立马“着陆”到有用的信息页面,还希望能快速看到那些能够进一步帮助他们做出决策的信息内容。所以提供一个考虑周全的着陆页能够大大地帮助营销决策的实施,并且提升转化率。上图是一个特别的案例,这是ErnestAsanov的关于博物馆的,它是一个试图推广艺术展览的着陆页。这个页面的目标在于提供给用户美观和谐又能突显重要的信息。页面的样式、颜色和动效都体现了一种极简主义的和谐感。在TimAsh、MauraGinty和RichPage的《着陆页优化:评估和提升转化率指南》一书里为设计师和营销者提供了在设计可交互的电子产品时需要留心的“残酷现实”:如果访客没法很容易地找到某个内容,那这个内容等于不存在;如果你想强调所有内容,那么所有内容都变得不重要;任何内容出现加载的延迟都令人失望而失去耐心。以上这些都印证了着陆页在维持用户注意力上的重要性,让你的内容更易被注意到、也更容易被找到。着陆页可以说是一种强调某些特定内容的工具,也能让你的目标用户更有可能使用你的服务和产品。在CameronChapman的著作《着陆页设计终极指南》里提到,一个营销者会犯的最大错误可能就是希望通过在网站首页堆放大量广告和公关活动以提升用户流量,却不在首页提供那些直达活动或推广链接的入口,让浏览网页的用户们摸不着头脑。四、着陆页由哪些内容组成?着陆页常常会用各式各样的创意去展现其内容,以吸引不同的目标群体。可以说着陆页根本不可能有统一的主题或结构,不过,着陆页需要提供的内容还是能够找出一些规律。页面的大小、包含多少模块、用了哪些视觉元素,这些都不是着陆页最重要的考虑因素,最重要的是如何让着陆页提供“有价值”的信息。一般来说一个着陆页需要包含以下内容:1)讲清楚你所展示的是什么(产品、服务、活动等),并提供刺激用户操作的元素。从用户的角度来说,他们要知道你能给他们提供哪些好处,即使没有非常具体的细节,至少用户能清楚地知道这些好处是什么并且这些好处确实有用。此时页面就可以同步地提供明显并且方便进一步查看或操作的按钮、表格填写、订阅服务等页面元素,吸引用户去点击。2)口碑及信任感。人们总是倾向于相信那些被其他用户推荐的东西,也认为那些信息更有关注的价值。因此在着陆页上提供一些用户评价、社交网络的粉丝规模、获奖情况和资质证书等信息,可以让访问者产生更好的印象,从而更有可能进入下一步。3)展现产品或服务的最主要的特征或卖点。这部分信息具有补充说明的作用,来丰富产品的展示和呈现。它能让用户得知更多细节,比如产品或服务所能达到的效用和应用的技术、能从哪些方面改善我的生活等。要注意的是,这些信息会让着陆页变得更庞大,所以在提供这些细节信息是要通盘考虑整个网站的信息规划,而不是仅仅把信息都一股脑儿地堆到着陆页上去。上图的案例来自SergyValiukh的着陆页设计,它提供了上文提到的所有内容元素。首先页面是一个有机食物商店的推广网页,包含了一些基本信息,例如商店名称、产品、服务的卖点、引导用户操作的各类按钮以及顾客评价的展示。设计者让整个页面信息很丰富,同时也不会过于复杂和冗长,有吸引力但也不会过于激进。在滚动页面浏览时设计者还加入了动画效果,让整个浏览过程的体验更为丰富,各个视觉元素之间组成了页面的整体视觉主题,让重要信息更为突出。五、从哪些方面着手能让着陆页更有效?1)目标用户分析每个着陆页的设计都离不开对用户群体的研究和分析。着陆页不是一个单纯的艺术品,而是市场推广和展示策略的融合。设计者必须将市场营销的目标和用户群体的特性牢记在心,把着陆页当做连接目标消费者和产品之间的桥梁。一个网页想要有高转化率,设计必须要事先进行对目标用户喜好、能力、心态的分析。不过要注意的是,没有一个着陆页可以让所有用户都喜欢,即便是最成功的商业运营也不会让每个人都满意。2)市场分析和竞争对手分析在设计着陆页之前你还需要分析现有竞争对手的策略。此前在文章《如何将广告策略运用到网页和App设计》里我们就讨论过如何将UX/UI设计和广告结合起来,其中的一个观点就是鼓励设计师去做竞品分析。着陆页是市场营销中的重要一环,市场分析也能帮助你产出更好的设计成果。更好地了解你的竞争对手,你才能少走弯路并且不让你的产品淹没在其它相似的万千产品中。3)精简你的文案广告界大咖DavidOgilvy说过“每一个字都要斤斤计较”,在你设计着陆页的时候必须牢记这个简单的道理。必须经过研究和测试才能决定用多少字的文案去展示信息,因为这些字直接决定了用户会不会买你的账。不过话说回来,并不是每一个着陆页都要保持极少的文字字数。比如当你要宣传的是一个著名的公司或产品时,少量的文字就足以说清楚并且吸引用户进行下一步操作,然而,如果你要推广的是一个全新的产品或服务,那么则有必要多花些文字去让访问者了解更多。上图展示的是Polina设计的一个公益组织的网页,页面中谨慎地使用了信息文字,辅以视觉图片,让用户得以了解俱乐部的活动。4)品牌元素很明显,着陆页应该着重展示logo、主题色、字体、标语和其它身份特征元素,你必须在你所呈现的产品、服务、活动和公司及其品牌视觉语言之间建立紧密的关系,这就提高了一般营销策略的效率。5)视觉设计在此前的文章里我们讨论过在界面中的视觉设计,人们通常对视觉元素更敏感,也更容易识别和认知视觉元素,即使它们是高度抽象的图片。在大多数情况下,人们认知和处理如图标和插图等图像化的内容比处理文字更快。大部分用户出于本能,也更容易被视觉元素所吸引。在上文列出的插图中,页面都提供了很有吸引力、具有信息量的图形化设计,它们让着陆页更吸引眼球,在访问者快速浏览时,能让他们产生审美的愉悦,同时减少阅读大段文字的时间。6)找到卖点并吸引用户操作着陆页的设计有两个关键因素。USP(UniqueSellingPoint)独特的产品卖点,是顾客最关注的产品特性和优势。CTA(CalltoAction)是鼓励用户进行下一步操作的入口,你通过它们来实现用户的转化。有效的着陆页能够快速的传达卖点,并用醒目的、关于CTA的设计解决方案以及技术都值得用另开一篇文章,我们会在TubikBlog的下篇文章进行讨论。7)减少加载时间加载时间的长短是影响设计效果重要的元素之一。用户不喜欢浪费时间,同样也不会在为了看一个着陆页而等待太久。所以千万别让访问者等待,你要在设计着陆页的时候就要考虑设计方案是否会导致加载时间的延长。8)视频展示动态效果是一种很好的产品呈现方式,还能够避免用户花费精力看文字。视频能被运用在任何页面场景里,让网页更为动感和有趣。然而必须记住,视频很容易大大延长页面的加载时间,所以你得好好设计视频,让它们值得用户等待更多的加载时间。9)响应式设计几年前的《ThinkwithGoogle》一文中提到了“响应式设计”这个有趣的概念,也从统计学的角度验证了响应式设计在网页设计中的重要性:61%的用户表示,如果他们在手机浏览网页时无法快速找到目标信息,他们就会立刻放弃,去访问其它站点。79%的用户遇到不喜欢的页面,会返回重新搜索其它站点。50%的用户如果一个服务在手机网页上很难浏览或操作,即便这个服务在功能上再成功,他们也不愿意经常使用。有可能上面这些统计数字在今天会变得更高,因为越来越多的用户每天都使用移动设备,所以千万别忽略了着陆页在手机等移动设备上的显示效果。10)减少让用户分心的元素前文已经提过,着陆页应该让用户能够保持专注力,所以你得去除页面上那些会让用户分心的信息,并加强会影响转化效率的关键信息的展示。越少的额外链接越好,应该以最容易被注意到的方式展现引导用户进行下一步操作的元素,以便用户能够找到并完成他们的操作任务。上图为LudmilaShevchenko设计的着陆页,目标是展现SwifyBeaver开发的MAC应用程序,在页面上设计元素十分简洁,用户的注意力都会集中在标题文字上,而标题下方即为申请免费试用的按钮,整个页面没有任何多余或无用的链接,仅仅提供了必要的点击入口,让用户不会分心从而更有可能被转化。六、如何测试你的着陆页?可用性测试方面的专家在不断的实践中已经证明,任何一个项目都不是完全客观的,尤其是那些长期的项目。设计师也并不能奇迹般第让那些产品的使用者一下子变成对产品了如指掌的专家。因此,仅仅只是创造概念还不够,你还需要用实践和数据来改进你的设计。DavidOgilvy还说过一句名言:在广告里最重要的一个词是“测试”,只要你坚持去做测试,你的广告就会变得越来越好。对着陆页进行测试,能更好的了解用户行为,并改善着陆页上那些无效又不友好的设计。在设计着陆页的实际过程中,不少研究已经能证明,一点点微小的改进,例如操作按钮的颜色、公司LOGO的位置,都可能提升页面效果,而标题文案、辅助说明的改进,则可能会大大提高你的转化率。收集用户统计数据并进行分析,是让设计变得更有效的途径,同样也能让你的用户转化和营销策略更为成功。
-
2018,这五个风格可能会引领公司网页设计潮流!
01.几何图案与全屏背景图相结合让我们不使用网格来布局吧。(或者至少尝试一下调整为左右不对称。)背景设计并不需要完全的对齐每一个要素、图案。此外,他也没有必要是纯色或者图案。将网页设计所需要的要素组合起来,围绕左右不对称来平衡它们。例如在上述案例NapLuxuryGuestHouse中,画面被整个背景图所充满,仅在右侧留有少许留白。还有在CMMNTY中,文字文本破坏了空白空间的平衡,将用户的视线强制性的转移到文字上来了。还有在vase这个案例中,在特大的商品图案上,仔细斟酌文字文本放置的位置使得设计整体十分出众。05.抽象效果与抽象艺术设计在做背景设计时想法有时也会不切实际,在那种时候就来试试抽象设计吧。颜色、形状、和一些小花样而组合起来,表现出与别人不一样的有趣的视觉效果。在做网页设计的时候,与其他的作品有着视觉上的差异是非常重要的,引起用户的兴趣抱着“这是什么?”这样的想法来点开网页是必要的。设计与别人相似的情况下,用户也没有什么理由来访问你的网站了。将看起来漂亮的设计时刻挂在心上。将有魅力的文字一起组合起来,去享受设计的乐趣吧。大胆的将尝试别人所有没有使用过的有趣的想法运用到实践中吧。后记你的网站是否使用了老旧的,过时的背景风格呢?那个时候,重新设计一个更具现代感的背景风格会让你的网站变得更棒。参考介绍的这些案例,让每一次设计都变得不同,多尝试一些具有创意的风格吧。
-
做公司网页设计,没灵感怎么办?看这里
01.半扁平化设计过去纯粹的扁平化设计几乎统治了整个网页设计市场,但今年由于具体化设计的影响,今年的网页设计会变得更加趋向于立体化。这种转变将体现在一些光和阴影的运用,成为所谓“半扁平化设计”。扁平化设计的兴起是为了适应现代科技推崇的极简化设计风格。扁平化设计仍会存在,但已不再被大量发展并使用。适量渐变阴影的使用将会在保留其简约风格的基础上使扁平化设计更加复杂和写实化,这将会是融入2017年设计趋势的一个特点。02.动态照片所谓动态照片不是我们在各网站上看到普通的gif图,而是一张静态的照片,其中有一个动态的元素。这项技术让一张普通的照片有了一些生气和活力。03.更多3D3D元素绝对是今年的主力,我们很快会看到它更多的出现在所有的设计领域里。时下VR技术势头正猛,3D设计元素可能会快速融入我们的生活。04.动画效果动画效果已经越来越多的以各种形式出现在网页设计上,诸如gifs,SVG,WebGLCSS或小视频。动画形式绝对是去年的最主要的趋势之一,所以请果断的使用它。05.几何图形、纹样、线条、圆圈该趋势始于2016并且延续至2017也风头不减,你可以通过几个简单且时髦的几何形状就让你的网站个性化起来。可以使扁平化的或者有浅浅的阴影。06.大胆配色亮眼的配色能彰显个性,无论实体化或扁平化设计都能与之完美融合,你可以用谷歌的色版来安排自己喜欢的配色。07.创造性的视觉角度动态图这样元素的加入能让你的网站瞬间变的独一无二,通过多角度的图层或者多角度拍摄的影片来完成,可以用来拍摄任何事物。08.渐变色渐变色是时下最主要的流行趋势之一,始于2016且势头至今有增无减。像Instagram这样的业界大拿甚至将其logo由扁平改成了多颜色渐变。从logo到按键和图片,渐变色的潮流已经无处不在。09.手机浏览(适应设计)在2015和2016年,用手机浏览的趋势开始增长。平板和智能手机现在已经逐渐超越了台式和笔记本成为了人们浏览网站的第一选择,并且会持续普及下去。任何不能适应手机端浏览的网站都需要考虑升级啦。10.自定义插图插图仍然很流行,但在2016-2017年将会流行一个新的特征:自定义的图标和插图。如果你想要一个独一无二并让人印象深刻的网站,去找一个数码设计师吧。少点陈旧多些创新,你会得到你独一无二的插图。11.巧用中性空间和网格过去几年里,网站的排列大都规律的按条条框框排列好,但在2016年我们看到很多网站开始用更自由,不规律的方式排列内容,使设计更超现代化。12.内容划分因为适应网页设计的需要,内容的分割变得更加重要,能把屏幕的内容划分为两个或更多部分。一个划分清晰的网站能够同时展示给观者多个同等重要的信息。这一趋势始于2015年末,但在2017年会发展的更远,并且很可能会出现在更多网站上。13.穿插视频网站里的视频内容在去年开始增加,并且人们更多的希望看到能通过高质量的视频讲好一个故事。一个网站里的视频可以很短,或者循环播放。通过更高的摄影艺术,能让观者对故事保持兴趣。14.隐藏导航栏关于如何让用户快速找到隐藏的菜单栏这个问题,一直都有很多争论。但有一点是确定的,趋势已经无法阻挡,人们最终会习惯的。15.微小的细节设计对于细节设计的追求在今年变的尤其重要,从导航栏等主要细节,到角落的logo等微小细节都不能放过才算完成。家经常会提出没有灵感怎么办这类问题。但其实对于设计的理解就好像是小孩在最初认识语音和文字一样,输入性的学习很重要。如果在小的时候没有人教我们认识汉字的字形和读音,那么我们可能一辈子也不知道这些汉字的意思和读音。所以一定不要忘记多看多练!没有谁的灵感是与生俱来的!
-
剑走偏锋!6种实验性的公司网页设计导航模式!
随着越来越多的网页开始采用加粗的非衬线字体置于网页顶部作为导航,许多有想法的设计师开始有意识的打破这一规律,别出机杼,采用不一样的导航模式。虽然绝大多数的设计都遵循设计规则和用户的使用习惯,但是标新立异的设计仍然非常有市场。独特的设计更容易让人难忘,这一点是毋庸置疑的。在网页的导航栏设计上,也是如此。随着越来越多的网页开始采用加粗的非衬线字体置于网页顶部作为导航,许多有想法的设计师开始有意识的打破这一规律,别出机杼,采用不一样的导航模式。当然,如果你的网站用户量大,并且需要尽量降低用户的使用门槛,遵循常规的设计更合适。如果你的网站是更加偏向实验性的小网站,有趣而好玩的导航模式,反而更适宜于用户探索。不同的导航模式对于网站的影响不尽相同,针对不同的内容、不同的用户,你需要仔细挑选导航模式。实验性的导航并不具备泛用性,但是如果你在追求别具一格的设计,那么下面这些独特的导航设计应该能激发你的灵感。侧边栏导航侧边栏导航的设计多种多样,它可以是静态的也可以是动态的,宽度可大可小,几乎可以随心所欲地进行设置。但是如果你仔细审视会发现,它不仅仅是单纯的将原本的顶部导航旋转90度放到侧面就好了,对于正常的上下滚动的页面而言,常驻的侧边栏导航意味着整个页面其他部分的长宽比和以往截然不同了。所以,不论侧边栏导航的宽窄如何,你都需要重新审视,尤其是它在不同尺寸、比例的屏幕下的显示效果,并且进行合理的重设计。同时,导航中的文字如果太长,在侧边栏中还存在展示上的问题,那么你要怎么解决呢?需要考虑的问题非常之多。最优的导航设计通常都不会使用太长的词汇,并且占据的空间也相对固定。导航项目最好不要太多,如果导航栏需要滚动浏览那就太过了。上面Sanctum的案例就做的足够简单干净,当用户滚动浏览的时候,导航会停留在对应的位置,并且随着背景而改变色彩。这个案例的优秀之处在于,它的导航和背景融为一体,它的设计会促使用户先查看图标和名称,再纵向滚动页面浏览。隐藏和弹出式导航汉堡图标的流行让隐藏式导航大行其道,而隐藏式的设计所带来的另外一个结果就是弹出式导航。在桌面端上,隐藏/弹出式导航很少会占据整个屏幕,而在移动端设备上,为了保证可用性,不少的弹出菜单会选择做成全屏式的。隐藏/弹出式导航严格意义上算不上是非常实验性的设计,但是它可以玩的非常多样。对于一部分用户而言,汉堡图标并不是那么直观,也不够熟悉。设计师可以在弹出效果、样式和位置甚至图标样式上,多花点心思,玩出花头。上面CaavaDesign这个网站的弹出式导航非常有趣。在绝大多数的设计师还在使用扁平而简单的弹出样式的时候,他们走的更远。这种设计让用户更容易注意到关键的信息,引导用户浏览信息。水平滚动当你首次浏览一个需要水平滚动的网站的时候,体验会非常的奇怪。首先它的物理和视觉运动方向和常规的纵向滚动不同,而且当你使用鼠标滚轮滚动的时候,这种交互的错位感会极其强烈。想要让水平滚动式浏览更加自然,设计师需要加入视觉线索来帮助用户导航,强化浏览逻辑和体验。使用箭头和定位式导航效果会非常不错。上方Norgram这个网站就使用了部分图片作为视觉引导,向用户暗示屏幕侧面还有更多的内容可供浏览。视觉线索的存在,使得内容结构和滚动方向显得统一而自然。无导航模式有些网站摒除了导航这个模块,而是选择将所有的内容平铺在整个页面之上。这种设计其实挺棘手的,因为如何页面所承载的内容过于复杂的话,这种模式可能会让用户觉得无所适从,难以下手。无导航模式其实最适合一些小型的、目的直接而简单的网站,比如一些“CommingSoon”的网站页面,就不需要导航。还有一些特定工能的小网站,只需要简单的滚动浏览,几乎不需要太多点击就能完成信息的获取。结合简单的动画和动效,这样的无导航的网页也可以非常有趣。不过总的来说,这样的设计会让人觉得缺了点什么。带标记的单页式设计许多优秀的实验性的网页设计都采用单页式设计作为主要载体。而这种选择也是有道理的:用户不会在单页式设计中迷失。而与此同时,长单页设计中,用户需要通过不断向下滚动来浏览信息,浏览到什么程度,用需要通过标记、目录和进度条这样的视觉标识来判断,而这本质上和导航的功能异曲同工。在上面的Socius页面的右侧,使用了许多同类网站都采用的小圆点来作为视觉标识,当光标悬停在小圆点上的时候,会有信息浮现,告诉用户这些区域的内容。同样的,用户可以通过点击这些小圆点快速跳转到特定的区域。当你采用这样的设计之时,技巧在于尽量让导航定位快一些,利索的切换能够让整个体验更加令人舒适。微妙的边缘导航和侧边栏导航不同,这种完全旋转90度到右侧的文字导航,设计的更加微妙,通常出现在小型的作品展示型的网页上。就像上方这个名为S的网站。这种风格的导航只会使用文字,并且条目通常会非常少,字体也相对会少。这种导航元素会随着界面、元素的变化而发生改变,甚至在某些界面中会消失。和侧边栏式的导航相同,这样的边缘导航也会影响到整个界面比例,不过总体上是很微妙的,这种影响非常小。结语在导航设计上,绝大多数的设计师都愿意遵循传统的设计。不过今天所谈及的这些实验性的设计,也越来越多的出现在新的网站设计上,也许你会在将来的设计趋势文章当中看到这些元素。
-
保洁公司网页模板设计