巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+城市分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
赞助文档Help

超具体解读:UI导航设想不只仅指的是导航栏 - 网页设想 - taishanly.com

一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-10 02:18:36 阅读数: 117

编者按:实在网页或App中的导航(Navigation)这个观点远不止咱们熟习的导航栏,而是一个加倍广的交互观点:指导用户和产物停止有用的交互,完成用户的方针。本文将具体地先容界面的导航设想。

一个网页或App产物要想有很好的可用性(usability),须要做好的最根基的一点是导航的设想或说指导用户的设想。若是用户在利用一个网站或App的时辰找不到自身的处在甚么地位或该若何去到想要的页面,那末视觉成果再若何有创意或抓人眼球都没法弥补产物的错误谬误。不论你的产物想知足用户甚么须要,让用户晓得产物当下的状况和每步支配以后的成果是对用户最根基的尊敬。

导航

起首,让咱们弄清晰导航这个观点。最根基的寄义便是在咱们的实际天下中,当咱们从一个处所到别的一个处所,须要一些指导和唆使。英文中Navigation这个词来历于拉丁文,原意便是:支配船只在海上飞行。以是导航便是能够或许或许或许赞助咱们达到方针地的步履。导航的其余意思都是成立在这个原意的根本上。

以是回到UX/UI设想上,导航毫无疑难是可用性的一个要点。它能够或许或许或许界说为一系列指导用户胜利地与产物互动并且完成他们方针的举措组合或技能组合。 用户带着他们的希冀和方针来利用你的网站或产物,作为设想师的你须要给他们供给完成他们方针的最好支配流程。是以当你的导航设想得很是高效,用户休会能取得极大的晋升。

在你刚起头设想你的界面时,就要思虑若何设想一个有用的无缝跟尾的导航。经由进程一些可交互的元素,比方按钮(buttons),开关(switches),链接(links),标签(tabs),条(bas),菜单(menus),地区(fields),让用户在不同的界面之间停止切换。

咱们使命室的设想思绪是,在界面设想的初期就周全地思虑导航的设想,包罗界面的规划,页面间若何切换,导航元素的安排和具体功效。并且经由进程低保真原型来停止考证,保障用户能清晰地晓得一切首要的支配。若是跳过这一步,设想将有庞大的危险,其余任务有能够或许或许到头来都白干了。以是不论,对用户仍是客户仍是设想团队来讲,做好这最根本的局部是很是有益处的。

菜单(Menu)

菜单是咱们最熟习的具备导航功效的元素,它向用户展现了界面的一切首要选项。根基上,它能够或许或许或许是用动词定名的一系列指令,用户能够或许或许或许用它来唆使体系做出举措,像保管,删除等;它也能够或许或许或许是一个用名词定名的目次,用来代表不同内容的调集。

在界面设想中菜单能够或许或许或许放在不同的地位(侧边菜单,顶部菜单,底部菜单等),具备不同的交互和视觉情势(下拉菜单,上拉菜单,滑动菜单等)。要想设想佳肴单的地位、交互和视觉情势,设想师须要颠末周全的用户查询拜访,包罗方针用户的预期和请求、接管才能和利用情境。好的菜单设想能让用户更快地完成他们的方针,为用户休会打下坚固的根本。

△ 作者:Tubik

这是一个博客APP的界面设想,接纳了侧边菜单和目次的情势,笔墨间接申明内容,再加上图标来做为赞助的视觉申明。

△ 作者:Ludmila Shevchenko

这个UI观点设想的例子很好的利用了色采作为标记,这是一种很有用的导航技能:每个分类的背风景利用了和目次不异的的色采,如许目次和内容有着很是强的相干性,用户能天然地将他们接洽起来。

步履呼唤(CTA)

CTA是用户步履呼唤的简称(call to action)。CTA简略来讲便是指设想师经由进程设想,安慰用户去做出一些步履。呼应的,CTA元素便是指那些能安慰用户做出步履的交互元素。典范的CTA元素是按钮,标签或链接。

不论在甚么界面,CTA元素都是高效的交互步履的焦点,极大的干系到产物的可用性和导航有用性。若是CTA元素的设想不到位的话,用户会发生猜疑并且得费力地去测验测验。产物的转化率和用户休会城市大打扣头。这便是为甚么CTA元素出格值得重视。不论甚么样的界面,它都必须是最瞩方针元素之一,用来间接地奉告用户若何用这个产物。

△ 作者:Eugene Cameel

一些CTA元素间接用图标情势而不任何笔墨申明,但只合用于大师都熟知其寄义的图标,比方听筒图标和信封图标。上图这个例子中,这个听筒图标便是这个界面中一个焦点,是一个典范的CTA元素,指导用户疾速地完成他们的方针。不须要任何笔墨申明,用户也能懂点击这个图标的成果。

可是,若是一个图标的寄义不是那末较着或能够或许或许形成曲解,最好仍是加上笔墨申明。

△ 作者:Tania Bashkatova

下面这个例子是一个对建造海鲜的网站的着陆页(Landing page)。页面的标题let’s cook另有食材照片是一个CTA,但不是一个可交互的CTA。可交互的CTA是下面这个白色按钮,用户点击这个按钮能看到更多对不同主题和菜谱的信息。 抓人眼球的色采夸大了页面的视觉层级干系,把用户的重视力拉到关头的交互地区中。

条(Bar)

条(Bar)指的是界面中一组用户能够或许或许或许点击的元素,用来疾速与产物停止互动,或还能让用户晓得事务的历程。

标签条(Bar)

最根基的条是标签条(Tab bars),常呈此刻APP界面的底部,让用户能在APP的不同模块间疾速切换。

△ 作者:Sergey Valiukh

载入条(Loading bar)

载入条是用来奉告某个举措的停顿,用户能够或许或许或许经由进程时辰、百分比或其余信息领会全部进程。

△ 作者:Sergey Valiukh

进度条(Progress bar)

给用户供给反应,让他们领会事务的进度,比方说打算的任务完成了几多。

△ 作者:Valentyn Khenkin

按钮(Button)

按钮应当是用得最多的元素了。按钮能让用户在对体系收回指令后取得得当的反应。用户经由进程按钮对体系下号令,跟体系停止交互从而完成他们某个方针,比方发送邮件,买一个东西,下载文件,播放音乐等等如许的指令。按钮之以是那末的常常利用和对用户那末友爱,是由于按钮很好地仿照了人和实在天下里跟物品的交互。

现此刻的UI按钮有成千上万的设想款式,能知足良多的设想须要。按钮典范的用处是标明这个处所是可点击,是以须要具备很是高的视觉辨认,有着特定的外形另有笔墨申明它能完成甚么举措。设想师凡是须要花不少时辰好好斟酌若何让按钮很好地融会界面的气概,同时又能在视觉上跳脱出来。

△ 作者:Ernest Asanov

以下是在APP和网页设想中常常利用的几种具备附加功效的按钮。

汉堡按钮

汉堡按钮埋没着一个菜单。当用户点击他们的时辰,能把菜枯燥出来。有这个名字是由于它是由三条水平线构成的,看起来就像是汉堡的情势。它是一个典范的交互元素,也是颇具争议的元素。

大大都用户晓得点击这个按钮能睁开一个菜单,以是不须要额定的申明。汉堡菜单极大地节流了界面的空间,能让界面看起来更简练,也为其余首要的界面元素腾出了须要的空间。它同时很是合适呼应式设想,经由进程埋没菜单让全部设想更同一,界面能在不同装备间坚持分歧。虽然它由于一些错误谬误而饱受争议,但由于这极大的益处,它今朝依然被普遍的利用。对这个元素的首要诟病是,对一些对界面不太熟习的用户来讲,这个比拟笼统的设想元素能够或许或许会让他们发生猜疑。以是,在决议利用汉堡菜单前,应当查询拜访一下方针用户的接管水平和他们的须要。

△ 作者:Ernest Asanov

上图这个观点设想便是用了汉堡按钮把菜单埋没了起来,从而完成一个简练的页面规划和视觉成果。

加号按钮(Plus button)

普通经由进程这个按钮,用户能够或许或许或许完成增添某个内容的举措,比方增添新的接洽人,状况,条记,地位等一切用户在产物里能做的根基举措。偶然辰,点击这个按钮会呈现新的窗口。偶然辰还会呈现一些选项供用户停止挑选增添甚么内容,这取决因而甚么产物。

△ 作者:Sergey Valiukh

下面这个例子便是用户在点击加号按钮后呈现了能够或许或许或许挑选增添的内容(图片,视频,笔墨),在挑选了以后才会弹出增添内容的窗口。虽然这个支配能够或许或许增添一些额定的交互举措,但由于赐与了用户挑选空间,以是仍是对用户很友爱的一种设想。

分享按钮(Share Button)

分享按钮望文生义便是能让用户把内容分享到他们的交际平台账号上。大大都情况下,这个按钮都是用交际平台的Logo作为视觉笼统,如许很是易于辨认和认知。

开关(Switch)

一样,这也是一个用户很是好晓得的元素,在界面顶用得也很是多。由于它很好地仿照了实际天下里人们熟习的开关观点。对这个元素的设想,出格要重视的是开和关的状况在视觉上要不同很是较着。如许能避免用户花时辰去研讨若何是开若何是关。良多种的情势对照或切换动画都能够或许或许或许处理这个题目,从而设想出很好的用户休会。

△ 来历:Tubikstudio

这个案例是来自一款闹钟利用Toonie。动画成果让交互变得更流利和天然,同时全部控件色采的转变和滑动元素形状的变更让用户能够或许或许或许等闲地辨认出开关的状况。若是你想领会全部App的案例研讨,能够或许或许或许到来历检查。

挑选器(Picker)

也很好晓得,便是让用户在一些选项里选出方针选项。凡是包罗一个可滑动的列表,下面是一列数值,比方小时,分钟,日期,怀抱,币种等等。经由进程滑动列表,用户能够或许或许或许选定想要的数值。这个元素普遍地利用在偶然辰设定这个功效的界面设想上。

△ 来历:Tubikstudio

复选框(Checkbox)

复选框是能够或许或许或许用来同时标记多个特定的内容。一样的,也是借用了咱们在实际天下里熟习的观点。咱们在测验的时辰,或填查询拜拜候卷的时辰会在选项前的小方框里涂上色采作为选中的标记。和开关一样,复选框一样用得良多,首要在设置页面设想里。不过,复选框另有别的一个用得比拟多的处所,那便是含有使命办理,待办事变,时辰记实等近似功效的App或网页。

△ 作者:Tubik

下面这个是一个待办事变App的观点设想。用户点击复选框后,表现这个内容已完成。字体变粗的同时色采发生了转变,如许就很是较着地把这个已完成的使命和其余未完成的使命辨别开来。

界面的导航(Navigation)是用户休会设想的焦点之一。毫无疑难,若是你看不到路, 你就去不了你的方针地。用户此刻正面对着愈来愈多的网站和APP产物。愈来愈多的挑选会让用户希冀这些产物具备合适他们利用习气的导航设想。

图标(Icons)

图标能够或许或许或许界说为一个意味着某个观点或物体的视觉笼统,有着增强与受众相同的方针。会和笔墨连系一路利用,将想要转达给受众的信息表现出来。在界面设想中,图标凡是是象形标记或表意笔墨,对可用性和胜利的人机交互有首要意思 。

毫无疑难,图标的此中一个首要感化是能够或许或许或许有用地替换笔墨描写。由于比起笔墨,用户对图片的晓得速率更快,以是这个特色能极大晋升用户休会,增强产物的导航和对用户的指导。可是,须要重视,即便是轻细的歧义或曲解城市致使糟的用户休会。以是在设想图标的时辰要做须要的测试,根据方针用户均衡好笔墨和图标的利用。最有用的体例是同时利用图标和笔墨,如许大局部用户都不会有题目。电商APP或网站最常利用如许的情势来给用户充足的信息,让他们能轻松疾速地阅读。

△ 作者:Tubik

根据图标的功效,咱们能够或许或许或许将它们分为一下几类:

交互式图标(interactive icons)

这类图标具备交互功效。他们是可点击的,能回利用户的请求,触发图标代表的举措。这类图标奉告用户按钮、控件或其余界面交互元素的功效或特色。在大大都情况下,这类图标的意思明白,不须要笔墨赞助申明。

△ Tab Bar

△ 菜单观点设想

申明性图标(clarifying icons)

起到申明感化的图标,设想师用它来表现某一个特色或内容的品种。它偶然辰不属于界面规划的元素或并不具备间接的交互功效。常常和笔墨连系利用。

△ 作者:Tubik

△ 作者:Ernest Asanov

文娱性和装潢性图标(entertaining and decorative icons)

这类图标重视抓人眼球的视觉成果并非功效,凡是常利用在节日或出格款的场景。他们能有用地吸收用户的重视力,增强视觉打击力。

新生节和春上帝题的图标:

△ 图片作者:Arthur Avakyan

APP图标(app icons)

在各个平台上可交互的品牌标记,展现品牌和产物的笼统。最罕见的便是咱们手机界面上每个App的图标,下面凡是是品牌和产物的Logo。

△ 作者:Arthur Avakyan

网页图标(favicons)

便是咱们常常在网址栏或书签里看到的URL后面的阿谁小图标,也是代表着产物或品牌的笼统。能让用户在阅读网页时给他们疾速的视觉提醒。

搜刮地区(Search Field)

搜刮地区又常常被称作搜刮框(search box)或搜刮条(search bar),代表着用户能够或许或许或许在这个地区内输出想要搜刮的内容。它是那些有着良多内容的网站或APP的焦点导航元素,像博客,电商,消息等产物。设想得好的搜刮框能让用户轻松地找到想要的信息。由于它能赞助用户省去良多时辰和精神,以是它是一个对用户出格友爱的界面元素。

它的设想情势有良多种,能够或许或许或许是标签的形状,也能够或许或许或许是指导输出的一条线或简略的一个搜刮图标。大大都情况下搜刮框的图标是一个缩小镜的款式。根基上一切的用户都晓得这个图标的寄义,以是能完成很是直观的导航设想。想要在这个图标上做文章的话,要好好测试一下,由于改得不好的话会严峻影响交互和界面的可用性。搜刮框还能够或许或许或许插手供给候选项的下拉菜单或主动弥补内容的功效。

△ 作者:Ernest Asanov

别的须要重视的一点是搜刮框控件在界面中的地位。在网页设想中,搜刮框常常呈此刻网页的顶部。这是一个很得当的设想,由于凡是网页的顶部地区具备很高的可见性,用户翻开网页就看到了,不须要再花时辰去找到这个控件。举个背面例子,若是一个电商网站由于搜刮框的设想有题目,致利用户没体例疾速便利地找到想买的东西,网站发卖表现会遭到极大的影响。由于此刻良多网站都将搜刮框放在网页的顶部,以是用户也养成了在那边找到搜刮框的习气。

至于App界面的话,要视具体情况而定,设想师能够或许或许面对更多的限定。若是是一个有着大批内容的APP,并且搜刮是焦点功效之一的话,那末普通放在一个背眼的标签条(tab bar)上。若是搜刮并不是焦点功效,那末能够或许或许或许把它藏到菜单里或只在须要的用到的处所显现或时辰显现出来。

△ 作者:Sergey Valiukh

标签(Tag)

标签是一个标有关头词的可交互元素。标签实在是给用户供给疾速通道的元数据,用户能够或许或许或许经由进程它疾速导航到与关头词相干的一切内容。除网页或App自身带有的标签,在良多情况下用户也能够或许或许或许自身建立标签。

△ 作者:Design4users

标签这个界面元素被普遍地利用在用户首创内容平台(UGC)的界面设想里。当用户上传图片、状况到交际收集的时辰,能够或许或许或许加上关头词作为标签。上图就展现博客网站Design4Users利用了标签来增强网站的内容导航。经由进程点击某个标签,能切换到带着这个标签的一切内容的页面。标签是友爱的搜刮引擎优化(SEO-friendly)技能,能进步用户搜刮内容的胜利率。

△ 作者:Unsplash

再举一个例子,上图是图片素材网站Unsplash的界面。当用户想要下载图片刻,能够或许或许或许输出描写图片的关头词作为标签。经由进程如许的情势赞助用户有用地找到想要的图片。咱们还能够或许或许或许重视到,输出框内插手了指导用户停止支配的申明,如许更进一阵势进步了产物的可用性。设想的细节真的很首要。总而言之,标签是一种用户能够或许或许或许自行缔造的导航元素,拉近了界面和方针用户之间的间隔。

周全地设想好全部界面的导航不是一件轻易的事,须要一些心思学、交互形式、用户测试的根本常识,还须要在项方针初期思虑清晰网站或App的信息架构。可是做好这一点的话,能够或许或许或许让你的产物很好地赞助用户处理他们的题目,给优异的用户休会打下坚固的根本,让他们对你的产物发生愈来愈大的粘性。

「干货实足!导航设想指南」

  • 《另有这类支配?这10个导航栏设想技能别错过了》
  • 《设想师必看!5种适用App导航菜单设想计划》
  • 《超适用!聊聊标签式导航的设想思绪(附设想师做条记体例)》

原文地点:uxplanet
原文作者:Tubik Studio


【网页设想 首创文章 投稿邮箱:yuanhttp://www.taishanly.com/】

================明星栏目保举================

优优教程网: taishanly.com 是巅云旗下优良中文教程网站,分享了大批PS、AE、AI、C4D等中文教程,为零根本设想喜好者也筹办了知心的常识树专栏。开启收费自学新篇章,根据咱们的专栏一步步进修,必然能够或许或许或许敏捷上手并建造出酷炫的视觉成果。

设想导航:国际人气最高的设想网址导航,设想师必备:http://www.taishanly.com/

巅云大讲堂

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。

相干消息more

11
05月
专业网站设想公司、专业网站扶植公司网站扶植的

互联网成为咱们糊口的一局部后,网站也就成了咱们大师离不开的一件糊口大事,出格是一些实体企业,他们出产了产物后,为了翻开辟卖渠道,岂但接纳告白... >>概况

06
05月
网站扶植公司—若何晋升企业网站笼统?

企业的笼统,干系到企业的生死,可见笼统对企业的首要性。良多企业做慈悲,做公益等等多方面的尽力,都是为了晋升企业的笼统。对中小企业来讲,利... >>概况

01
04月
微信小法式是若何赢利

简介:微信小法式若何赢利大师都晓得,咱们要想创业,第一件事便是要赢利,便是要卖东西,也便是咱们所说的现金流和营业量。比方:拼多多,对咱们的压... >>概况

11
04月
用3个实在案例,奉告你若何挑选合适自身的使命

本章节咱们经由进程三个实在案例来深度阐发若何找到合适自身的使命,外行业中稳步进步,不时进步,终究成为一位优异的设想师,取得行业承认,完成自我代价... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站