Advertisement

Weather-widget-by-Piotrek-Sliwa

 

iPhone 5Sも販売も開始され、iOSの最新バージョン「iOS 7」のダウンロード配布もはじまっています。いつも利用するインターフェースデザインに関しても、フラットデザインを採用したり、アウトライン型アイコンで統一したりと、大きく変化しています。そんなiOS 7の新機能「コントロールセンター」で採用されている、背景をぼかした半透明ガラスのようなデザインが、ビジュアル面においてとても印象的でした。

 

 

海外デザインブログDesignModo.comで、グロス感のある半透明ガラスデザインを採用した、モバイルアプリ用UIデザインをまとめたエントリー「Glossy and Transparent Eleemnts in Mobile App Interfaces」が公開されていたので、今回はご紹介します。

 

 

 

詳細は以下から。

 

 

 

光沢感のある半透明レイヤーを使った、モバイルアプリのUIデザインまとめ

 

Transperant Wireframes

不透明度をかなり下げて、白色インターフェースが見事に強調された、アプリ用ワイヤーフレームデザイン。

Transperant-Wireframes-by-Zeki-Ghulam

 

 

 

‘Cel°C us’ Weather App

天気の変化に応じて壁紙を切り替える天気予報アプリで、こちらでも不透明レイヤーが採用されています。

weather-App-by-Ryan-Jeon

 

 

 

Calendar

色鮮やかなグラデーションテクスチャが、半透明デザインとの相性もばっちりです。

Calendar-by-chocolatinaShoko-Oyamada

 

 

 

iOS 7 Simple Music Player App

ミントグリーンのトレンドカラーを採用した音楽アプリで、グロス感のある半透明レイヤーが素敵。

iOS7-Simple-Music-Player-App-by-Kreativa-Studio

 

 

 

Timers

ぼかしエフェクトを適用した背景に、サークル状のシンプルデザインが素敵なUIデザイン。

Timers-by-Marcos-Paulo-Pagano

 

 

 

Activity Tracking App Concept

ぼかし系テクスチャを背景にすることで、ミニマルな印象を与えることができます。

Activity-Tracking-App-Concept-by-by-Alexander-Zaytsev

 

 

 

Weather iPhone App

グリッドレイアウトをベースに、ガラスが反射したようなエフェクトなど質感にこだわったアプリデザイン。

Weather-iPhone-APP-by-DrawingArt

 

 

 

Weather App

大小さまざまなサークルを組み合わせることで、デザイン性だけでなく、機能性も考慮したアプリデザイン。

Weather-App-by-Jan-Erik-Waider

 

 

 

Peach Me

背景ぼかしエフェクトに、サークルデザイン、エメラルドグリーン配色などトレンドデザインからインスパイア。

Peach-Me-My-Profile-by-Rob-Davis

 

 

 

Mobile Portfolio iOS 7 Style

iOS 7インターフェースを再現した、個人用ポートフォリオサイト。

Mobile-Portfolio-iOS-7-Style-by-Alex-Bender

 

 

 

Dreamy Weather

アプリタイトルのとおり、ドリーム感たっぷりなイメージ写真が素敵な、天気予報アプリインターフェース。

Dreamy-weather-by-Marek-Cina

 

 

 

Extranet App for Tutors

強調したいパーツの不透明度を変更することで、読みやすさにもこだわったつくりとなっています。

Extranet-App-for-tutors

 

 

 

New Music App

こちらもぼかしを加えた背景に、シンプルな操作性を考慮した、不透明サークルUIデザインを採用。

New-Music-App-by-Amit-Rai

 

 

 

Photo Play Pro App

写真レタッチアプリのインターフェースで、編集しやすいように、使っているツールを半透明でカンバス表示しています。

Photo-Play-Pro-App

 

 

 

Pediatrics

カラフルでフェミニンな色使いで構成された、女性向けアプリデザインコンセプト。

App-Design-Pediatrics-by-Rodrigo-Alberto-Cavazos

 

 

 

iOS 7 Control Center Redesign

公開されたばかりのiOS 7ですが、新機能「コントロールセンター」をリデザインしたコンセプト画です。

iOS-7-Control-Center-Redesign-by-Sam-Nissinen

 

 

 

Code Name: Swith

サムネイルをより分かりやすくするテキストを、ブラック半透明レイヤーに重ねてデザイン。

Code-Name-Switch-by-CreativeDash

 

 

 

iOS 7 Theme?

スケジュール管理がうまくなりそうな、iOS 7にインスパイアされたUIデザイン。

iOS7-Theme-by-Patrick-Cabral

 

 

 

iOS 7 Weather App v.2

黒をつかった半透明レイヤーに、時間ごとの天気情報をすっきりと並べた、モダンインターフェースデザイン。

iOS7-Weather-App-v.2-by-Dmitriy-Haraberush

 

 

 

Juventus Mobile Version

サッカーチームや選手の個性にフォーカスできる、レイアウトが魅力のインターフェース。

Juventus-mobile-version-by-Ammar

 

 

 

Recipe App

壁紙デザインにぼかしを加え、半透明で作成されたリボンデザインが採用されています。

recipe-app-by-Ste-Ui

 

 

 

Citizen.tv Competition

ストライプ状に並べられたコンテンツに合わせ、半透明レイヤーを組み合わせた具体サンプル例。

citizen.tv-by-Alexandre-Protikhin

 

 

 

Just Weather App

直感的な操作性をじっくりかんがえ、自然をテーマにした素敵イメージと、半透明レイヤーが相性抜群です。

Just-Weather-App-by-LEX-NAU

 

 

 

魅力的なスクリーン画面をあつめた、モバイル用アプリUIデザインまとめ

ホームスクリーンやロック画面などのデザインをまとめたエントリー、よろしければ。

iPhone-home-screen-concept-by-Andre-R-Almeida(2)(3)

 

 

サムネイル@ : Weather Widget by Piotrek Sliwa – Dribbble.com

参照元リンク : Glossy and Transparent Elements in Mobile App Interfaces – Designmodo