1. 时髦小巧的导航设计
1. Smart and compact navigation design
之前过大型的导航设计,随汉堡图标又大行其道。可能对于汉堡菜单的隐藏式设计不够明显,传统的导航设计又逐步回归,不过在风格上,倒是呈现出时髦而小巧的特点。这种导航在细节和体验上更加考究,更重要的是,小巧的布局和信息量的控制使得它一目了然,如果想要更多的导航信息则需要点击「更多」按钮。
Large scale navigation design was popular before, and then Hamburg icon became popular again. Maybe the hidden design of the hamburger menu is not obvious enough, and the traditional navigation design is gradually returning, but in style, it is fashionable and compact. This kind of navigation is more exquisite in details and experience. What's more, the small layout and information control make it clear at a glance. If you want more navigation information, you need to click the "more" button.
这种导航设计的优点在于,它为下面的主要内容留下了足够的空间和焦点,又确保了导航本身的功能性。
The advantage of this navigation design is that it leaves enough space and focus for the following main contents, and ensures the functionality of the navigation itself.
而缺陷也同样明显,由于导航设计得过于小巧,可能会让部分用户感到困惑。就目前来看,这种导航适合单页式的网站或者是访问量相对没有那么大、个性十足的网页,结构复杂的网站就不适合这样的设计趋势了。
And the defect is also obvious, because the navigation design is too small, may make some users confused. At present, this kind of navigation is suitable for single page websites or relatively less visited and personalized webpages. Websites with complex structure are not suitable for this design trend.
下面的三个网站不同程度地运用了这一设计趋势:
The following three websites use this design trend in varying degrees:
在页面的右侧加入了一个黑色的垂直条,用一个小的暂停按钮和小巧的动态来吸引你切换页面。小巧的导航被置于页面部。
Add a black vertical bar on the right side of the page, with a small pause button and small dynamic to attract you to switch pages. Small navigation is placed at the bottom of the page.
这个网站采取了一个相对折中的方案,采用了侧边栏导航,而其中包含了 LOGO、汉堡图标和搜索按钮,这样保证了菜单的显著,也保持了整个设计的简约性。当你点开汉堡图标的时候,会发现这里面真的隐藏着大量的链接,甚至包含了文章推荐。
This website adopts a relative compromise scheme, which adopts sidebar navigation, and includes logo, hamburger icon and search button, so as to ensure the prominent menu and keep the simplicity of the whole design. When you click the hamburger icon, you will find that there are a lot of links hidden in it, even including the article recommendation.
导航栏同样置于侧边栏,不过是在左侧,所有的链接都摆在明面上,但是从名称到样式都非常的简约小巧。
The navigation bar is also placed in the sidebar, but on the left side. All the links are on the surface, but the name and style are very compact.
2. 有趣的图层剪切效果
2. Interesting layer clipping effect
学会通过图层控制来营造充满视觉吸引力的设计,会让你在设计的时候如虎添翼。通过控制不同图层的元素互动,可以创造令人着迷的视觉效果。
Learn to create a visually attractive design through layer control, which will make you more powerful in design. By controlling the interaction of elements in different layers, you can create fascinating visual effects.
值得庆幸的是,以往令人挠头的各种设计效果,现如今对于网页前端而言已经是小菜一碟了。越来越成熟的前端技术让图层的控制和管理更加得心应手。近,为的图层相关的技术,是图层剪切的效果,这种效果指的是将部分元素切除为前景中的元素腾出位置。
Fortunately, the various design effects that used to make people scratching their heads are now a piece of cake for the front end of the web page. More and more mature front-end technology makes layer control and management more handy. Recently, the most popular layer related technology is the effect of layer clipping, which refers to the removal of some elements to make room for the elements in the foreground.
这种图层剪切效果几乎适用于任何类型的网站和设计,被裁剪的部分可以是任意大小、位置的,而使用这一效果的诀窍在于控制元素之间的协同,前景的元素要和背景的元素之间完美地配合起来。
This kind of layer clipping effect is suitable for almost any type of website and design. The clipped part can be of any size and position. The key to use this effect is to control the coordination between elements. The foreground elements should be perfectly matched with the background elements.
被裁剪的部分应该和整个设计的信息传达息息相关,和设计目标保持一致。比如,它应该能够辅助导航,引导视觉,帮助用户获取信息,促进功能,帮助用户理解信息。
The cut part should be closely related to the information transmission of the whole design and consistent with the design goal. For example, it should be able to assist navigation, guide vision, help users get information, promote functions, and help users understand information.
3. 快速剪辑的视频
3. Fast clip video
设计师一直在借助视频来呈现设计,讲述故事。不过,在视频内容的呈现上,千变万化,目前的做法,是使用快速剪辑或者加速之的视频,来快速地呈现丰富的内容。毫无疑问,这样的方式不仅贴合了如今用户注意力集中时间短的现状,而且更好地保持用户的参与度。
Designers have been using video to present design and tell stories. However, in the presentation of video content, there are many changes. At present, the most popular method is to use fast editing or accelerated video to quickly present rich content. There is no doubt that this way not only fits the current situation of users' short concentration time, but also keeps users' participation better.
快节奏的视频剪辑,好处在于更加快速的信息展现。用户在浏览的时候能够很快弄明白视频要呈现的内容,整个视频的循环速度也更快,也能够更好的促进用户和网站的交互。
The advantage of fast-paced video clip is faster information display. Users can quickly understand the content of the video when browsing, and the whole video cycle speed is faster, which can also better promote the interaction between users and the website.
Jinan website construction will bring you these wonderful contents today. For more wonderful contents, please click: http://www.jnzyjz.cn/ Check the details, we will have more wonderful content waiting for you