圆形UI的魅力-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44109821/article/details/103677653
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>变色龙</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			*{margin: 0;padding: 0;}
			body{background: #000;background: url(img/body-bg.jpg) no-repeat center top;color: #666;font-family: "微软雅黑";}
			li{list-style: none;}
			a{text-decoration: none;color: #026acb;}
			a:hover{text-decoration: underline;}
			img{border: none;max-width: 100%;}
			.wraper{width: 980px;margin: 0 auto;overflow: hidden;}
			header{margin-top: 40px;}
			header h1{font-family: "微软雅黑";color: #fff;font-size: 25 px;}
			header h2{color: #fff;margin-top: 10px;font-size: 14px;}
			nav{background: #6a6a6a url(img/nav-bar-bg.png) repeat-x;height: 40px;border-radius:5px;background: -webkit-linear-gradient(linear,left,top,left,bottom,form(#b9b9b9),to(#6a6a6a));margin-top: 20px;}
			nav li{float: left;}
			nav ul li a:hover{color: #FFFFFF;background: #000000;text-decoration: none;}
			nav li a{display: block;padding: 12px 15px ;color: #FFFFFF;}
			.search{width: 220px;margin-top: -35px;float: right;margin-right: -38px;}
			.search input{border: 1px solid #B5853F;padding: 5px 10px;border-radius: 5px;outline: none;margin-top: 40px;}			
			main{background: #FFFFFF;width:600px ;margin-top: 30px;outline: none;overflow: hidden;border-radius:10px ;padding: 30px;}
			article{float: left;width: 600px;border-radius:10px ;}
			article h1{font-size: 25px;color: #000000;}
			.post-date{font-size: 13px;}
			article p{font-size: 13px;line-height: 20px;padding-bottom: 20px;}
			aside{float: right;width: 280px;margin: 30px 10px 30px;}
			.widget{margin: -995px 0 30px;padding: 10px 20px;background: #FFFFFF;border-radius: 5px;}
			.widget h4{font-size: 15px;margin: 10px auto;}
			.widget li{border-top: 1px solid #CCCCCC;line-height: 30px;}
			.show{background: #FFFFFF;border-radius: 5px;height: 200px;}
			.show ul{height: 150px;padding-top: 15px;width: 300px;margin-left: -20px;margin-bottom: 10px;}
			.show h4{font-size: 15px;margin: 10px auto;}
			.show li{float: left;margin-left: 25px;}
			.footer{width: 980px;margin: 0 auto;}
			.footer p{color: #fff;margin: 40px auto;}
			@media only screen and (max-width: 980px) {
				header{width: 950px;}
				.footer{padding-left: 10px;}
				main{width: 540px;margin-right: 20px;}
				article{width: 540px;}
				article img{width: 540px;}
				aside{width: 300px;}
			}
			@media only screen and (max-width: 650px) {
				header h1{margin: 15px 100px 5px 0;}
				header h2{margin: 0 0 15px;}
				.searchform input{position: absolute;top: 35px;right: 0;z-index: 100;height: 30px;margin-right: 10px;}
				article{width: 100%!important;}
				.right1{margin-right: 540px;width: 94%;}
				.right2{width: 94%;padding-top: 20px;height: 80px;}
				
				}
			@media only screen and (max-width: 480px) {
				nav ul li a{font-size: 90%;margin: 10px 10px;}
				.right1{margin-right: 10px!important;width: 91%;}
				.right2{width: 91%;padding-top: 20px;height: 120px;}
			}
			
		</style>
	</head>
	<body>
		<!--头部-->
		<div class="wraper">
			<header>
				<hgroup>
					<h1>变色龙视觉传媒</h1>
					<h2>无生活，不设计</h2>
				</hgroup>
				<nav>
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">理念</a></li>
						<li><a href="#">作品</a></li>
						<li><a href="#">团队</a></li>
					</ul>
				
			<div class="search">
				<input type="search" id="" placeholder="Search">
			</div>
			</header>
			<!--正文-->
			<main>
				<article>
					
				<h1 class="post-title">圆形风格的移动应用实例</a></h1>
				<p>
				  <time class="post-date" datetime="2017-10-27" pubdate>Oct 27, 2017</time></p>
			
			<figure class="post-image"> 
				<img src="img/sample-image.jpg"/>
			</figure>
			<p>圆形被认为是能够被人眼最快识别出的对象之一。这就意味着我们的大脑有能力处理在圆形中的信息比处理在常规的三角或矩形中的数据略快一些。对于小型的以手势为基础的交互界面中，这种能力真的非常关键。这一点对移动设备来说尤为典型，在大多数的情况下，这成为了选择基本UI元素形状的决定性因素。赏心悦目的曲线取代了尖锐边缘，有助于营造一种温暖舒适的气氛，让感观愉悦。它有效地增强了用户体验，让交互界面简单而明了。
选择圆形一个最普通的原因就是它模仿指尖的形状的能力下意识也将圆形元素与按钮联系在一起。因此，作为一条规律，你很容易发现行为召唤的按钮（call-to-action buttons）应用在环形结构后，有相当一部分应用程序大肆地在设计中使用这一形状。例如，音乐导向的应用，或者是可视化的闹钟以及时钟都离不开环形结构。

本文的选例都是带有明确的圆形风格的移动交互界面，这些界面自然地融入了UI流畅性，更多的可用性和吸引力。

Eli Williamson设计的Lock Screen Concept使用绚丽的相片背景来吸引用户的注意力。紧凑的排版，醒目的圆形图案以及主体的白色给应用增加了雅致与空间感。</p>

		 <img src="img/2300334P9-4.jpg"/>
				</article>
			</main>
			<!--右侧-->
			<aside>
		<div class="widget">
			<h4 >最近更新</h4>
			<ul>
				<li><a href="#">快讯</a> (3)</li>
				<li><a href="#">设计</a> (23)</li>
				<li><a href="#">建议</a>(18)</li>
			</ul>
		</div>
		<div class="show">
			<h4 >作品展示</h4>
			<ul>
				<li><a href="#"><img src="img/ps.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/ae.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/dw.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/fl.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/ai.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/fw.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/id.jpg" height="48" width="48"/></a></li>
				<li><a href="#"><img src="img/pr.jpg" height="48" width="48"/></a></li>
			</ul>	
			
		</div>				
	</aside>
	
			</div>
			<!--底部-->
		<footer class="footer">
	
		<p>Web Design by sharwoo</p>

	</footer>
	</body>
</html>