首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

首页(欧亿注册)首页

发布时间:2022-10-27 09:53 所属分类:热门主题 浏览次数:
  一款由湖南欧亿网络科技有限公司(欧亿注册简称“欧亿主管【33300】科技”)网站旗下的伊桑·马科特创造“呼应式网页规划”这个词以来,现已过去了三年。这曾经是一个革命性的新想法,但现现在现已变成了一种常见的规划。呼应式网页规划(RWD)不再是一种趋势,它是现在最好的规划体现。
  我想说的是,呼应式网页规划很快就会像css和html的别离相同明显。这不是是否运用它的问题。这是一个你是否能正确实现它的问题。
  咱们日子在后PC年代。移动设备,以及最近十分盛行的可穿戴设备变得越来越重要,咱们别无挑选,只能接受咱们的网站需求为不同的屏幕分辨率供给最好的体会这一实际。现在,越来越多的互联网流量将来自智能手机和平板电脑。在上一年销售的电视中,就有超越25%是具有互联网衔接的智能电视。是的,只要呼应式网页规划才干让您轻松为这些设备及其一切者供给服务。
  规划人员需求对呼应式网站进行原型规划,而编码人员必须对它们进行编码。这便是新的实际。准备好了吗?欢迎来到呼应式规划年代。
网页欧亿注册类型
  什么是呼应式网页规划?
  呼应式网页规划当然不是一个不言自明的术语(尽管它很接近),所以我想咱们需求定义它。呼应式网页规划是一种规划办法,能够让欧亿注册网站呼应某些设备的屏幕分辨率。这意味着因为呼应式网页规划,规划师能够在手机,平板电脑,大屏幕等设备上翻开网站时自由地控制网站的外观。
  以下是一些呼应式网站的截图,能够帮助您更好地了解呼应式网页规划:
  您还能够测验规划的网站的呼应才干。调整窗口巨细,并调查它怎么奇妙地刻画不同屏幕分辨率的体会。
  呼应式网页规划更像是一种规划理念,而不是一种单一的、定义明确的办法。呼应式网页规划是一种规划思想形式,迫使规划人员考虑不同设备上的体会。
  呼应式网页规划面临的应战
  前面咱们现已了解到了什么是呼应式网页规划,现在咱们讨论一下它面临的应战。
  呼应式网页规划要求规划人员和开发人员具有多角度规划思想过程。你必须考虑你的网站在不同设备上实际的阅读体会。这一般意味着您需求彻底改造界面才干使其易于运用。每个首要分辨率都必须是一个断点,用于重塑界面。
  您需求记住的一件事是,呼应式网页规划并不是要缩小一切内容来习气iPhone的屏幕。规划呼应式网站便是要供给超卓、接连、跨途径的体会。
  听起来很杂乱吗?是的!这便是咱们过着艰难的日子。
  幻想一下,假如没有将网页上的部件细心调整到较小的屏幕分辨率,每个网站最重要的组件之一或许会在移动设备上彻底乱掉,其成果将是致命的。假如没有正确规划导航,您的网站将在其他设备上成为一种无法运用的体会和痛苦的本源。
  尽管我所知道的大多数呼应式网站都有习气性强的导航组件,但它们一般规划得很差。像触摸屏设备在导航方面有不同的要求和习气;大屏幕会供给更多空间去实现网站明晰度等,这是你规划呼应式网站时应始终紧记的作业。要规划一个接连的、跨途径的体会,就意味着要细心考虑每个途径、设备是否以相同的精度供给服务。
  麻烦的呼应式网站导航是我想详细讨论的作业。为了帮助你更好地了解我所说的,下面每个导航组件都已从头还原为原型。这应该能够让您更好了解呼应式解决方案的结构和含义。
  在每个示例下方,您还能够找到一些链接,这些链接可让您在规划中重用这些形式。
  现在-让咱们处理呼应式网站上运用的盛行导航形式。
  缩短和躲藏
  我最喜欢的一个呼应式网站导航的比如是“DoneDone”。关于规范的1224px屏幕宽度,DoneDone在顶部菜单中有一个简略的链接列表,这里有两个高超的规划:一个用于“计划&定价”的按钮和一个独自的“登录”链接。在这两种情况下,“DoneDone”的规划者为他们认为至关重要的导航栏供给了视觉上的差异。这或许并不是什么特别别致的规划,但它必定是一项适当的规划。
  关于较小的分辨率,则会像变魔术相同。当您开端调整窗口巨细时,您会注意到首要它们使导航链接变小(但依然易于阅览,例如在iPadMini上),然后在720px下躲藏导航链接。在DoneDone网站上作业的规划人员理解,他们不能持续无限期地缩小导航中的字体巨细,因而他们利用了现在盛行的移动应用程序导航形式。躲藏在便当菜单中的导航链接在屏幕顶部具有固定方位。这意味着在向下滚动网站时,您能够持续拜访导航。
  这种战略的另一个比如是呼应过程中的网站。关于较小的屏幕分辨率,它们会缩小并移动导航链接,以供给持续的导航便当性体会。假如您在智能手机上翻开该页面,您会注意到它们“固定”了导航的方位,就像“DoneDone”相同有意思。可是,新版别的网站遇到了一个小问题。“发现”链接坐落iPhone上网站的徽标下方。这时候又改怎么做才干做得更好呢?很简略。例如,他们能够躲藏“DoneDone”款式菜单中的链接。
  最终,说说我最喜欢的比如-SkinnyTies。这个制造精巧的网站很好地处理了网站在不同的设备上的呈现。首要,它们的顶部导航巨细会依据屏幕巨细进行调整(它还会稍微改变方位以创立一致的布局)。关于较小的屏幕,规划师大胆地躲藏了购物车、搜索和登录/注册链接。这是一个绝佳的挑选,因为它使下拉列表功用彻底(请注意,下拉列表的内容也会依据屏幕的巨细进行调整),一起节省了名贵的空间。SkinnyTies的呼应式网站在任何地方都必定是一个亮眼的存在,我信任无论是谁都必定会喜欢它的。
  移动和躲藏
  并非每个导航都适宜缩短和躲藏链接。假如导航有许多层,比如杂乱的信息结构、层层叠连的链接、或许只是不适宜运用小字体的排版,总而言之,您必须考虑这些情况下该如怎么做。比较盛行的一种做法是对中等尺度屏幕的导航链接从头排序,并将其躲藏在较小屏幕(智能手机)的菜单中。
  TheNextWeb现已把握了移动/躲藏导航链接的艺术。他们在宽屏幕上的呼应式网站呈现出杂乱的导航形式。两个下拉列表‘’图标,五个链接,躲藏的搜索......这是一个会发生各种意外的组合,可是,TheNextWeb的网页规划师做到了。假如您将窗口巨细调整为800px,您会注意到它们从头组织了整个网站的顶部。徽标已缩小到适宜顶部菜单。整个“一切频道”列都躲藏在屏幕左边的菜单中。成果很棒,这是一个明晰明晰的网站,我想他们正确地运用了盛行的呼应式网页规划形式(尽管菜单中的“一切频道”在某种程度上依然很古怪)。
  假如您将窗口巨细调整为768px及以下,或许只是在iPad/iPhone上翻开它,则五个导航链接将会从屏幕上消失,这增加了整体形式的明晰度。我想吐槽的是,假如欧亿注册链接根本不那么重要,为什么它们会首要出现在更宽的屏幕上呢?看起来它似乎是整个导航中不必要的,只是为了好看挤到网业上,或许只是因为它适宜宽屏幕呢?
  在《SmashingMagazine》的网站上,现已避免了将其他信息强制放入更宽屏幕的失败做法-这是高度杂乱导航的另一个比如。粉碎杂志共有三个级别的导航:
  首要分类:书本,图书室,活动,作业板
  主题类别:编码,规划,移动,图形,用户体会规划,字压
  特定于每个主题类别的子类别
  这三层导航迫使《SmashingMagazine》的规划师创立了一个杂乱的呼应式网站。关于最宽的屏幕SmashingMagazine运用屏幕左边的两个导航列。巨细为1224px及更小的屏幕在网站顶部具有“首要类别”,在一列中包含“主题类别”和“子类别”。这是菜单结构重组的合理挑选。
  可是,最有趣的作业发生在较小的屏幕上。
  假如您在iPad上以横向视图(1024px)翻开Smashing杂志,您会注意到子类别消失了,而主题类别则被挤压在“首要类别”下方。
  最终,关于728px和更小尺度的屏幕-一切导航链接都躲藏在规划精巧的菜单中。在Smashing的形式中,唯一或许成为问题的作业是移动设备上缺少菜单的固定方位。毕竟大多数用户用移动设备拜访该网站是为了阅读最新文章,而不是阅读类别,不是吗。
  sony则为他们的网站创造了一个高雅的图画。尽管1224px和400px之间的导航几乎没有任何改变,但它们在320px中将它们的五个导航链接精巧地躲藏在屏幕右侧的菜单中。此形式使网站在iPhone上依然阅读体会极佳。我只能说干得美丽。
  微软运用与Sony导航相似的形式。微软规划师在屏幕右侧的整洁菜单中躲藏智能手机的导航链接。不幸的是,它没有固定的方位,而且整体上太杂乱了,每个类别都有下拉列表(尝试在iPhone上运用它真的是一场无休止滚动的噩梦)。他们是这样辩护的:他们确实在页脚中重复了导航链接,这有助于滚动到页面底部,而且帮助没有找到他们但需求查找内容的用户。这种重复的导航链接是一种极好的形式。
  全面重组
  在呼应式网站上导航的最终一个盛行的解决方案是彻底重组。规矩很简略:假如它不适宜那就改掉它,是的,简略暴力。
  UXlondon运用了一个简略而高雅的解决方案。关于宽屏设备,导航链接是水平放置的,关于较小的设备,它们以笔直平面从头组织链接。导航依然可用,尽管它运用相当多的笔直空间,迫运用户进行一些可靠的滚动以到达内容。
  全面重组的另一个比如是FoodSense的网站。在宽屏幕上,导航是笔直组织的,一切链接都附有图标。关于768px屏幕,导航将更改为笔直顺序。最终,关于320px智能手机,导航会转到顶部而不显现图标(这是一个不错的挑选,能够为小屏幕带来更明晰的信息)。
  丽晶学院的网站也有相似的导航形式。关于宽屏幕,导航规整地放置在网站的顶部。在首要类别下方,有几个其他链接。关于较小的设备,首要类别被从头分组到一种两行网格中,而欧亿注册其他链接则躲藏在含糊的“更多链接”按钮下(但我觉得这并不高超,这不是你应该仿制的形式...)。
  那么咱们该怎么规划完美的导航
  如你所见,一切办法都有其缺陷和长处。总而言之,这是关于在特定设备/设备类型上不断思考的特定用例。呼应式规划彻底致力于多途径思想。设备和用例的矩阵应该引导您完结规划的蜿蜒曲折。这一般意味着您将需求混合,缩短,移动,从头组织和躲藏这些规划元素以创立更好的结构。
  我想说,用户先于办法——这才是咱们应该记下来的作业。
  让咱们花几分钟时刻关注一个简略的导航形式。顶部,水平菜单,4个链接,以及一个登录/注册链接。幻想SaaS登录页面的一个十分规范的导航规划,我现已开端从最大的屏幕尺度(在我的情况下是1224px)规划它。一种办法是“移动优先”,但我总是发现,从最大尺度开端到最小尺度规划,更简略,服务更有用率。
欧亿注册网站设计
  我的下一步是为1024px增加一个呼应式节点,并指定规划在稍微窄的屏幕上应该是什么样子。在原型制造东西中,我从顶部菜单中增加了一个呼应式断点,指定我期望从1224px版别仿制我的规划。
  多亏了这个简略的选项,我只需求通过几个动作将我的规划调整到更小的屏幕尺度。我还决议缩小内容,以很好地习气我的项目的新版别。
  当1024px的版别完结之后,我将为768px增加一个节点(因为这是iPad屏幕巨细-这是一个重要的节点)。一般,这是咱们开端更多地运用导航的那一刻。可是就我而言,我比不喜欢这么做。躲藏任何链接或更改导航模型会带来不必要的杂乱性。这将会是一场繁琐的作业,但咱们应该寻觅更简略明晰的办法,而不是一开端就幻想结局有多夸姣。
  话虽如此,我只是稍微移动了一下导航,一起我还删除了整个右列,并将其内容放在首要内容下方。这是我认为很有用的一个办法。记住,假如不是什么重要的日子,就不要平白无故去寻觅盛开的焰火。让你的用户不是因为你的规划感到惊奇。信任我,用户会惊奇于简略解决方案的易用性。
  最终,最棘手的节点-320px——智能手机。尝试使导航链接变小既困难又有风险。关于移动用户来说,最终的体会或许是一场难以捉摸的噩梦。所以我决议急进一点。我已将欧亿注册导航移动到右侧的经典移动菜单,并将“登录”和“创立帐户”链接放在网站顶部-以便于拜访(这关于普通用户特别重要)。
  因为这个小技巧,该网站能够在小屏幕上彻底运用导航功用,而且在规划的明晰度上没有任何损失。
  记住了,关于320px屏幕,这种形式十分必要的。
  最终
  我必定呼应式网页规划将会持续存在并在未来越来越盛行,这必定是现代网页规划的首要形式之一。我真诚地期望看完本文后,您能够了解到规划一个在任何设备都彻底可导航的网站并非易事,任何屏幕尺度规划都是令人惊叹的。
 
作品标签: 网站 界面 用户 欧亿登陆

评论列表(共51人参与)参与讨论或分享设计作品获得视觉癖积分奖励