实例讲解教你如何设计平面化的网站

自从苹果放弃拟物化设计,采用扁平化设计以来,扁平化设计的龙卷风就全面席卷了整个UI设计界,自此之后,无论是网页还是APP的设计,首要考虑的就是采用扁平化的设计。扁平化的设计似乎成为了有别于拟物化设计的一种全新的设计思维方式,完全颠覆了拟物化的设计风格,开创了一个UI设计的新时代。

扁平化设计风格带给受众的是一种干净、简洁的设计情绪。这样的一种设计风格在扁平化风格出现之前其实已经被大量应用,只是在设计手法上没有扁平化的设计更加极致。例如下面这个案例,是一个典型的扁平化时代之前的设计,但整体的设计风格与扁平化的风格类似,都是简洁、干净的设计风格。其实,如果我们将这个设计中导航条、搜索框等元素中的高光、阴影去除掉,将其中的图标元素更换为非拟物化的图标的话,在版式上再变化一下的话,这个设计马上就可以变为扁平化的设计。

1

在我看来,扁平化的设计如此的流行是因为它更加适应于移动终端设备的小尺寸屏幕。扁平化的设计风格更加适合在手机、平板电脑等小屏幕上进行操作。但把扁平化的这种优势放大到能够颠覆整个设计思维方式的话,无疑是夸大了它的影响。扁平化的设计也有它自身的缺陷,如果将其用在稍微复杂一点的界面中,扁平化设计会带来很多困扰。因此无论它应用的再广泛,扁平化也仅仅只是一种风格而已,在大尺寸的屏幕上,例如网页方面的设计,没有必要都采用扁平化的设计。

当然,这篇文章并非要对于扁平化与拟物化的设计孰优孰劣辩个是非,相反,作为一种设计风格,身为UI设计师,扁平化的设计风格如此流行,我们更加应该掌握这种设计风格的特点及表现手法。这篇文章我们就用上面HTC设计案例的改版来详细分析一下扁平化设计风格的设计要素,掌握扁平化设计风格的设计方法。

那么扁平化的设计有哪些设计特点,我们又该如何动手将这个设计改版为流行的扁平化风格呢?我大概梳理了一下,基本的步骤应该包括以下几个方面:

一、梳理网站信息,剔除非重要的信息。

根据网站目的和诉求梳理网站信息,这是无论做哪种风格的网站设计都要做的第一步工作。信息梳理的工作非常重要,它直接关系到一个网站的目标能否达成,想想最重要的信息由于缺乏整理没有在页面的重要位置和视觉方面体现出重要性,无论设计的再美观,也是无用的。但我们经常所看到的情况却相反,一个网站的首页被重要不重要的信息塞的满满当当,每一个子页面的内容都要在首页上占据一个位置,什么产品展示、新闻资讯、常见问题、专题活动都出现在首页上,这样做的结果就是让次要的信息冲淡了重要信息的比重,信息的主次得不到体现,访问者浏览过网站后似乎什么都看到了,但却没有留下深刻的印象。时刻要记住,设计不是为了漂亮,更不是为了炫技,而是为了便捷信息的沟通。信息的梳理工作在扁平化的设计中显得更加重要,因为扁平化的设计就是要体现简洁、干净的特点,页面上的信息太多,就不太容易做出这样的视觉风格来。

拿上面HTC手机页面中的信息来举例,Logo和导航的内容不用多说,导航作为网站信息组织结构的体现是非常重要的一个元素。HTC是一个生产和销售手机的企业,那么可想而知,首页上最重要的信息当然是最新产品的展示,其次是最新的专题活动以及特色产品的展示,其他的例如企业新闻、产品支持服务搜索等内容大可不必在首页中出现,因为这些信息相较于前面提到的信息来说,没有那么重要,完全可以在内页中体现即可。

2

二、确定设计方案,具体落实版式、色彩方案、字体、创意等内容。

网站的信息确定之后,我们就可以着手来制定更为详细的设计方案。首先需要确定的是版式,也就是网站的布局。在扁平化风格的设计中,由于设计中常使用特别简单的元素,所以排版就变得非常重要,成为了设计中出彩的地方。扁平化设计中常见的排版方法是用矩形来划分页面中不同的信息区域,例如下面的几个案例所示,可以看到无论是整体页面的划分或者分栏信息的划分,矩形在其中扮演了非常重要的角色。

5 4 3 6

以扁平化的设计风格来看,上面HTC首页的设计导航部分的创意显得过于复杂,将主要内容固定在一个宽度内的板式看上去也过于小气,所以我们将目前已有的版式更改为通栏的布局方式。放弃目前导航的设计,将导航文字直接放置于通栏的导航条上,banner部分的设计也做同样的处理,banner下方是最新的活动信息,各个活动信息区域用矩形划分开来。

接着需要确定的是色彩方案。在扁平化的设计中,多采用纯度低、亮度高的颜色。高亮色彩的使用让整体的设计风格更加清新。看看下面这些案例的设计:

8 9 10 11 12

我们取一下HTC的logo的颜色,发现这个纯度偏低,亮度较高的绿色正符合扁平化的设计风格,所以直接拿来用就可以了。在这个设计中,我们依然采用前面设计中的配色方案,白色的背景色、logo中的绿色作为主角色,不同层次的灰色作为配角色进行设计。

在设计的质感上,毋庸置疑,我们需要去除掉所有之前设计中拟物化的表现方法。例如高光、阴影、纹理、等等。这也是扁平化设计的概念最核心的地方:去掉所有冗余的装饰效果。让“信息”本身重新作为核心被凸显出来。字体选择方面,为了契合简洁、干净的设计风格,我们采用非衬线字体,微软雅黑作为正文字体,banner部分的设计可考虑尝试更为纤细的字体,例如方正兰亭超细黑简体。

至此,我们基本可以确定整个页面的感觉,初步做出来的设计应该和下图类似:

13

接下来我们进一步细化设计方案。banner部分的设计是整个页面设计的重点。它是整个页面中最重要信息展示区域,就像我们在前面提到的,这部分区域应该用来展示最新的产品,所以在banner的创意上我们计划将实实在在的产品展示出来。我们选择了HTC的HTC One M9手机作为banner部分的视觉主元素。将其放置于banner区域,调整一下色相、亮度,然后再键入宣传语,搭配上相应的按钮和链接。

Banner下方的分栏信息部分,我们分别放置了手机配件、HTC如影摄像头、免费更换服务三个信息栏目,为了让分栏信息的排版不过于单调,我们将本来的四栏布局更改为三栏布局,将中间栏目的宽度放大,这样在版式上有所变化,看上去更灵活一些。分栏信息的设计创意全部来自于HTC现有的网站,这里我们不做另外的创意。分栏信息部分的色彩我们通过调整图片的颜色,保持了以绿色为主色调,辅以灰色搭配的方法,这符合我们本来在页面色彩方案上的想法。

再往下是页脚导航和版权信息,这部分的信息不是页面的重点,只要做到契合整体页面的设计即可。

下图是我们重新设计后的页面,对比改版之前的设计,我们就能对扁平化的设计方法有一个大概的了解。

14 15

实例讲解教你如何设计平面化的网站》有46个想法

  • Effet Levitra Buy Doxycycline In India Priligy En Tunisie Buy Tadacip Order Neurontine Overnight Buy Amoxicillin No Prescription viagra Sildenafil Without Prescription Viagra 50mg Sale Propecia 4 Month Printable Propecia Coupons Asendin

  • die Frage, ob diese Menschen (zu denen ich Sie bis zum Beweis des Geenitgels nicht zählen will) für ihre Meinung bestraft werden sollen (wie es derzeit der Fall ist) oder nicht (wie ich es für richtig hielte), ändert nichts daran, daß sie Unsinn behaupten. Und dies von mir auch klar gesagt bekommen.

  • What’s the exchange rate for euros? buy generic viagra 25mg
    The “Yes” campaign was more effusive, saying the RMT's decision “completely demolishes” Ed Miliband's “claims to be the authentic voice of working-class, Labour-minded voters across Scotland”.

  • I’d like to order some foreign currency order viagra
    Marie Gemmell, 36, tried to protect 3-year-old Cole and 1-month-old Devon from the smoke and fire, but there was nothing she could do, Montgomery County police spokesman Capt

  • Yes, I love it! viagra china 500mg Attorney General Eric Holder acknowledged the proximity to the election, but said that did not excuse the use of a law found unconstitutional by a federal judge

  • Will I get travelling expenses? betamethasone 0.05 buy online @AlkalineState: Good — we’re moving back toward the sharp “AlkalineState” wit that we all know and love! I think we need a bit more of your wit, with all the nastiness that usually comes out just before a big election.

  • Please call back later finast “On behalf of the Miami Dolphins, I would like to thank Dan for his contributions he has made as a member of the organization,” general manager Jeff Ireland said in a written statement. “For the past five seasons, Dan has been a tireless worker on the field while devoting countless hours of his time off the field to the betterment of the South Florida community.

  • Accountant supermarket manager carbozyne You need to keep in mind that part of companies’ liquid assets are the commercial paper and bonds they buy from each other. These are often described as “cash equivalents” in balance sheets but they are not “idle cash.” They are investments by companies in other companies.

  • I came here to study what is clonidine 0.1 mg used for “Demand for lending remains a challenge, but we want to do more than just wait for demand to materialize,” said Chris Sullivan, RBS’s head of UK corporate banking. “We want to play our part in securing the recovery.”

  • I came here to work purchase zofran He added that there are “very real risks in bringing a prosecution in which the prosecution would have to set out, effectively for the first time and to the criminal standard, the approach that should be taken by doctors before authorising an abortion”.

  • Whereabouts in are you from? purchase cefadroxil The swallows swooped and screeched as Ms Colletti recalled the evening of 9 October: “My father returned home from work as normal but almost straightaway he left again in the car, which had never happened before.

  • Insufficient funds Antibiotic Ceftin The latest athlete to claim he was led astray by a member of his entourage is American sprinter Tyson Gay, who acknowledged last week that he had tested positive for a banned substance. That substance is believed to be DHEA, a testosterone precursor outlawed by the WADA code and considered a controlled substance in many countries. It is available over the counter in the United States, however, and is not on MLB’s prohibited list.

  • I’ve only just arrived estradiol norethindrone acetate tablets generic
    The U.S. coal miner, with operations in China, said it hadentered into an agreement with a Chinese government-backed bodyin Beijing to build energy projects focused on waste removal,sewage treatment and cutting air pollution. Financial terms ofthe deal were not disclosed.

  • I can’t get a signal Order Fexofenadine The European Commission’s move does not cover beef, which falls under separate rules. But it would incorporate all fresh cuts, roasts and chops of pork, poultry such as chicken and turkey, as well as sheep and goat.

  • How do you know each other? omeprazole tabletki ulotka Throughout the regatta the boats looked evenly matched on the downwind legs, reaching speeds approaching 50 mph. The regatta was won and lost during the upwind zigzags, where Oracle’s team mastered the trick of flying on the foils.

  • We used to work together order dilantin online In the first effort of its kind, the nonprofit publisher of Consumer Reports magazine released ratings of 2,463 U.S. hospitals in all 50 states on Wednesday, based on the quality of surgical care. The group used two measures: the percentage of Medicare patients who died in the hospital during or after their surgery, and the percentage who stayed in the hospital longer than expected based on standards of care for their condition. Both are indicators of complications and overall quality of care, said Dr John Santa, medical director of Consumer Reports Health.

  • I’m a trainee prednisone 50 mg for 5 days for asthma Christians in Indonesia and much of the Arab world continue to use the word without opposition from Islamic authorities. Churches in the Borneo states of Sabah and Sarawak have said they will continue to use the word regardless of the ruling.

  • Other amount avalide dose Cuban told jurors on Monday that he had heard in April 2004 of a possible connection between Mamma.com and a known stock swindler, the late Irving Kott, in a phone call from an investigator with the Federal Bureau of Investigation.

  • What do you like doing in your spare time? cheap probalan Obama has said repeatedly that his primary focus is to restore economic stability to a middle class that is still wobbly after the deep recession of 2007-2009. That aim has been sidetracked since his re-election last November by his efforts to pass gun control and immigration legislation.

  • I’m not sure Buy Minocin Online Eric Young, Jr. scored the game-winning run. He reached on a one-out single to left, stole second and then scored when Crawford, the usually sure-handed Giants shortstop, bobbled Anthony Reckers’ ground ball.

  • I work for myself kamagra “There was some market concern about a month ago that Rajoy would be forced to resign but since then he’s said he would carry out the full term, so no one’s really paying attention to it,” said Bhavisha Patel, strategist at consultancy 4Cast.

  • I’d like to cancel this standing order cheap celadrin Celebrities may look phenomenal on the red carpet, but they also have hordes of makeup artists at the ready for even the tiniest of touchups. Catch them without the thick layers of powder, smoky eyesh…

  • I’m not working at the moment buy ditropan xl “Nobody was doing something to intentionally surprise the market. It was exactly the opposite. The most important thing is to get the policy right,” he said at a conference at the Goethe University in Frankfurt.

  • real beauty page Purchase Levodopa “Last year started with an especially early season with a large number of severe cases presenting together over a short time, but every year we see many patients in our emergency department who struggle to fight off influenza.”

  • Yes, I love it! buy fertomid The new duo also poses a challenge to the Brazilian SocialDemocratic Party (PSDB), which governed Brazil from 1995-2002and until Saturday was seen as the country’s strongestopposition force. Its likely candidate, Senator Aecio Neves, hasslid backwards in some polls recently and has been stuck inthird place.

  • I was born in Australia but grew up in England Generic Prinivil The number of protests has increased, sparked in part byyoung people using social media like Twitter and Facebook. Somein the predominantly Muslim nation with secular rule have takeninspiration from the Arab Spring revolts.

  • Do you like it here? moduretic With that money, the group — whose executive director, Guy Rodgers, worked as a consultant to John McCain’s 2008 presidential campaign — has helped pass anti-Islam bills in Tennessee and Arizona.

  • I like it a lot quibron-t Australia is one of the world's biggest resettlers of refugees, and currently takes an annual quota of 20,000. But those coming by boat are overwhelming this number — more than 15,600 have arrived by boat since Jan. 1 — and immigration facilities are being strained as a result.

  • I came here to study epivir-hbv This subdued trading pattern was also seen likely in Europe,where financial spreadbetters predicted Britain’s FTSE 100 to open flat to 8 points lower, Germany’s DAX to open flat to 2 points lower, and France’s CAC 40 tofall 2 to 3 points.

  • Are you a student? robaxin 500 mg muscle relaxant Sorgato, in a telephone interview, lauded Coppi’s “ability to pinpoint the crucial points that are fundamental,” a skill that could prove key in arguing the lower court failed to correctly follow judicial procedures.

  • Directory enquiries Vitamin D Calcitriol Investigators will also look at the crash-worthiness of thetanker cars, test brakes and wheels recovered from the wreckage,analyze the braking force required to prevent a train of thatweight and size from rolling downhill, and do simulations tolearn about the accident sequence.

发表评论

电子邮件地址不会被公开。