ユーザーがサインインするための使いやすいフォームをデザインしたい。
私は最初の段階としてモックアップを探していましたが、ログインフォームのより完全に設計された実際の例を見つけました。すばらしいですが、複雑さや気を散らすものを抽象化するためにモックアップを用意したいと思います。
サインインフォームのモックアップについては、このような繰り返しの多いコンポーネントであるため、さらに多くのリソースが見つかると思いました。ほとんどすべてのWebサイト/ Webアプリにあります。ですから、これを解決する手助けをしてみましょう。ここで作品を共有したり、関連するWebページにリンクしたりできると便利です。
私が遭遇した「ログインフォーム」の概念の一般的な要件/パターンを特定しました。
私はそれらのいくつかをモックアップに「翻訳」しましたfully designed & live examples
質問で言及し、上記の「一般的な要件」からいくつかの概念を追加しました。
追加の回答に貢献を追加してください。ありがとう。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
その場合は、関連する認証サービスにリダイレクトする「単なる」ボタンです。
多くのWebサイトは、OAuthまたは通常の資格情報を使用してログインする両方のオプションを提示しています。したがって、上記のモックアップソリューションの1つをOAuth button( s)、以下の例を参照してください。
iPhone-パスワードを忘れました-ポップアップダイアログまたはモーダル?
http://codepen.io/mweint/pen/aquez
http://codepen.io/oknoblich/pen/LfmGF
http://codecanyon.net/item/business-pro-css3-buttons-elements/1238832
以下のサインアップ/ログイン画面のデザインが気に入っていただければ幸いです。
そして、ここに私が自分で作ったデザインコンセプトのモックアップがあります:
ごきげんよう !