Mobile Web開発の基礎の3つ――ボタンで思いつく
2337 ワード
ボタンは生まれながらにしてモバイルプラットフォームのために生まれたものである:モバイルプラットフォームのボタンは往々にしてユーザーがクリックするように設計されている--これとは対照的にモバイルプラットフォームのハイパーリンクである.モバイルプラットフォームとデスクトッププラットフォームはヒューマンマシンのインタラクションに著しい違いがあり、モバイルプラットフォームの入力ツールはユーザーの指であり、表示領域は入力ツールに比べて小さい.デスクトッププラットフォームでは、入力領域よりも表示領域が大きくなり、マウスの存在はタッチスクリーン式のインタラクションとは異なります.
従来のボタン(button)はCSSで装飾されたボタンのように見えるラベルとは本質的に異なる.前者はフォームをコミットするために使用できますが、後者は他のコードを補助しない場合は、クリック可能なアンカーキーとしてのみ使用できます.キーは簡単に作成できますが、次のコードのような欠陥も発生しやすいです.
ブラウザでこのHTMLページを見ると、1つ目の「ハイパーリンクボタン」をクリックすると、通常のボタンが押されているスタイルが表示されますが、2つ目の表示スタイルはハイパーリンクと変わりません.この小さな欠陥は、いくつかの有名なインターネット製品に現れたことがある.
私の経験では、UI/UE設計スキームが開発者に渡されると、ほとんどの開発者は、コード入力が設計スキームの外観と一致すれば作業が完了し、実際の製品の可用性テストを無視すると考えています.もしこの製品が正式にオンラインで使用されているバージョンに現れたら、この製品の開発者が自分の製品を使用していないことを説明するしかありません.
要するに,ボタンはMobile Web設計においてかなり重要な部分である.ボタンの使いやすさのため、ユーザの使用頻度が高い機能は、ボタン(またはボタンの変種コントロール)で実現することが望ましい.同時に、自分のコードの可用性をテストし、製品が設計案と一致しているように見えると完成したとは思わないでください.
従来のボタン(button)はCSSで装飾されたボタンのように見えるラベルとは本質的に異なる.前者はフォームをコミットするために使用できますが、後者は他のコードを補助しない場合は、クリック可能なアンカーキーとしてのみ使用できます.キーは簡単に作成できますが、次のコードのような欠陥も発生しやすいです.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width;initial-scale=1.0"
<title> </title>
<style type="text/css">
#container {
margin: 0 200px;
}
.button {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #F2F7FA;
border-color: #D9D9D9 #A9A9A9 #A9A9A9 #D9D9D9;
border-left: 1px solid #D9D9D9;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
display: block;
padding: 0.5em;
text-align: center;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<div id="container">
<p>
<a class="button" href="#">More</a>
</p>
<div class="button">
<a href="#">More</a>
</div>
</div>
</body>
</html>ブラウザでこのHTMLページを見ると、1つ目の「ハイパーリンクボタン」をクリックすると、通常のボタンが押されているスタイルが表示されますが、2つ目の表示スタイルはハイパーリンクと変わりません.この小さな欠陥は、いくつかの有名なインターネット製品に現れたことがある.
私の経験では、UI/UE設計スキームが開発者に渡されると、ほとんどの開発者は、コード入力が設計スキームの外観と一致すれば作業が完了し、実際の製品の可用性テストを無視すると考えています.もしこの製品が正式にオンラインで使用されているバージョンに現れたら、この製品の開発者が自分の製品を使用していないことを説明するしかありません.
要するに,ボタンはMobile Web設計においてかなり重要な部分である.ボタンの使いやすさのため、ユーザの使用頻度が高い機能は、ボタン(またはボタンの変種コントロール)で実現することが望ましい.同時に、自分のコードの可用性をテストし、製品が設計案と一致しているように見えると完成したとは思わないでください.