Apple Design ResourcesApple Design Resources Design apps quickly and accurately by using Figma, Sketch, and Photoshop design kits, guides, and other resources.
iOS 純正メールアプリのUIがヤバイ件
社内のSlackでUI談義が突発的に始まることがあるのだけれども、以前そこで上がったiOS純正メールアプリのUIについてのネタがなかなか面白いのでまとめてみようと思った。結論から言うと、純正メールアプリ、ヤバイ。 まずは観察メールの新規メッセージ画面は他の純正アプリではあまり見かけないようなトランジションを採用していて、開くと元の画面が少し後ろに下がってナビバーだけが見えつつもメッセージ画面が中途半端なモーダルビューで現れたような状態になる。このUIが使いやすいとか何となく見た目がかっこいいとか、そんな上辺だけの理由では絶対ないはずなので、AppleがメールアプリをデザインするときになぜこのUIに至ったのか、その理由を考えてみた。 メールの新規メッセージ画面を開いた状態普段純正メールアプリでメッセージを送信することはほとんどなかったので、まずはいろいろと動きを観察することにした。新規メッセ
どのようにして高速に iOS アプリの UI を作り上げるか：動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ
Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか？もしくはモックアップを作成せずにすぐに実装に入るでしょうか？私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直しました。iOS アプリ開発の過程で、モックアップ作成や実装をどのように捉えるか、具体的にどう行うか、ということが自分なりに見えてきたので、それらについてご紹介します。 目的は、価値のあるプロダクトを速くユーザの手に届けること Web アプリやモバイルアプリの開発過程においてモックアップなどを作る目的は、あくまでも ユーザに届く プロダクトの価値を高めてそれを速くリリースすることです。適切な前準備は
Rxで1つ前の値を取得する
Apr 19, 2016 Twitter for iOSには選択中のタブをもう1度タップしたら最上部までスクロールするという機能があります。便利ですね。 こういう機能を実装するには、1つ前に選択されていた値が何なのか知る必要があります。 桶の時代にはプロパティに前回の値を保存するのが定石でしたが、川の時代にはskip(1)してzip()するというのが定石です(たぶん)。 let tappedIndex: Observable<Int> = ... Observable .zip(tappedIndex, tappedIndex.skip(1)) { previousIndex, currentIndex in return previousIndex == currentIndex } .filter { $0 } .subscribeNext { _ in // 最上部までスクロール }
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
Free iOS 9 UI kit, Illustrator & Sketch - Mercury Blog
You’re probably thinking, “I already use Facebook’s and/or Design+Code’s iOS 9 GUI document for Sketch. Why download another one?” Put simply, ours is better. We set out to create a more complete, more up-to-date, more accurate, and more thoughtfully structured iOS UI kit for Illustrator and Sketch. If you use Illustrator, there’s no contest — you won’t find another iOS UI resource remotely close
言葉も重要なUIの要素！言葉で高めるUIデザイン
はじめまして！ 株式会社Fablic で バイクフリマアプリ “RIDE” の、アートディレクション・UIデザインをしている わりえもん (@wariemon) と申します！この記事を読んでくださりありがとうございます！ UIにおける言葉の重要性 みなさん、アプリのデザインをする際にどのような箇所に気をつけていますか？ 情報整理・UI・ビジュアル・アニメーションなど、気にかけることは非常に多いのですが、アプリ内で使われる「言葉」も、情報を伝える上で非常に重要な要素です。 今回は、言葉に注目して、アプリをより魅力的に見せている例とポイントを紹介していきます。 先日リリースしたRIDEでも、実際に取り入れている部分もありますので、実践例の一つとしてお話します。 アップデート文言 タスク管理ツール “Wunderlist” や、Tumblrクライアントソフト “tumblrtext fot tu
Prottとsketchとzeplinのススメ
書籍化し、12万部突破しました。 【SlideShare広告回避用】 https://www.docswell.com/s/morishige/K3MXPZ-howtodesignslides ・PDFは無料でダウンロードできます ・自己学習や勉強会などの目的でしたらご自由にお使いいただけます ・授業・研修への利用はフォーム( https://forms.gle/WwgXTT974xFW78mFA )にご報告ください ・記事への参考資料にする際は適切な出典明記をお願いいたします 【使っているフォントについて】 M+フォント「MigMix1P」です。こちらもメイリオ同様おすすめです。 フリーで使えます。 【個人HP】 > https://mocks.jp > 仕事のご依頼はこちらから 【書籍情報】 デザイン入門：https://amzn.asia/d/4WDsTI6 デザイン図鑑：https
ビジュアル仕様書共有ツール Zeplin でアプリ開発が爆速になった - Qiita
デザイナーが作ったデザインをエンジニアがコードに落としこむ工程，コミュニケーションコストも大きくなかなか大変ですよね．そんな課題を解決してくれる，ビジュアル仕様書共有ツール Zeplin を使ってみたところ非常に好感触で，アプリ開発がかなり効率化されたように思うので，普及もかねてまとめてみようと想います． Zeplin は何を解決してくれるのか これまでアプリ開発の際，デザイナーさんに以下の様なビジュアル仕様書を Google Drive で共有してもらっていました． 自分はデザイナーさんみたいに 1px の細かい差異など分からなかったりするので，このようなビジュアル仕様書を作成してもらえると，正しく実装することができ非常に助かります．しかし，これには例えば以下のような課題がありました． (1) デザイナーさんのコストが大きい．上図の例はアプリの 1 画面に過ぎませんが，これが 10 枚，
UI/UX デザイナーを雇わない方がいい理由 ｜ブログ｜root｜芯を問い、成長に貢献する
UsabilityHour.com の創設者である、クレイグ・モリソ氏によるゲストポストをお届けします。 UXデザイナーとUIデザイナーは完全に違う役割を果たすから、一人の人間に両方の仕事を任すべきじゃない。 ふー、ついに言ってしまいました！ みなさん言いたいことはあるかと思いますが、その怒りをぶつける前に、まず説明させてください。 この2年間、私は二つのスタートアップでリード UX/UIデザイナーとして働いてきました。 また、どちらのポジションにいるときも多くのインタビューを受けしました。 次第に、どういう現象が起きているのかがようやくはっきりと見えてきました。 世間、特にスタートアップの創設者は、ユーザーエクスペリエンス・デザインが、本質的に何なのかを理解していないのです。もちろん、重要だということは把握していますが。使いやすいインターフェイスを持つというのは、デジタルプロダクトを売り
ipselon/react-ui-builder · GitHub
README.md Description This tool is a visual builder of React JS components for your web application. In builder you can easily combine available components with each other, and see how they look and feel right on a web page. Then you can generate a source code of new component from the combination, and builder will include all children and dependencies. Moreover you can generate Reflux actions/sto
確実に良くするUI/UX設計
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
— Bootbox.js — alert, confirm, prompt, and flexible dialogs for the Bootstrap framework
Bootbox provides three functions, alert(), confirm(), and prompt(), whose aim is to mimic their native JavaScript equivalents. Here's the simplest possible example: bootbox.alert('Hello world!'); Run example <!-- set up the modal to start hidden and fade in and out --> <div id="myModal" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <!-- dialog body --> <div class="moda
入力フォームの工夫 - ワザノバ | wazanova
http://googleresearch.blogspot.com/2014/07/simple-is-better-making-your-web-forms.html 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 今回、Googleのチームが、アイトラッキングシステムの利用やユーザインタビューを通じて、入力フォームのユーザビリティについて実験しています。参照しているのは、2010年にスイスのUniversity of Baselのチームがまとめた "20 guidelines to optimize web forms" です。2000年代のアカデミックな研究成果をもとにまとめられたものですが、現在もまだ当てはまるものと、ここ5-10年で変わってきているものがあり、興味深いです。最近は、スマホ
フェンリルのデザイナーがプロトタイピングの本を執筆しました
こんにちは、共同開発部 UI デザイナーの吉竹です。 本日はフェンリル社員が執筆を行った書籍が発売されるため、そのご紹介をいたします。 キーワードは”プロトタイピング”。 アプリ開発をされている皆様、「プロダクトのゴール、クライアントとうまく共有できないなあ……」とお困りではありませんか？ アプリ開発を依頼されている皆様、「リリースしたアプリ、ユーザーからの反応がよくないなあ……」とお困りではありませんか？ その課題、ひょっとしたらプロトタイピングを行うことで解決できるかもしれません。 今回出版された書籍は『プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法』。 本書は Art&Mobile CEO 兼 THE GUILD 代表でもある @fladdict 氏こと深津貴之さんと、弊社共同開発部 デザインチームマネージャー、荻野博章の共著となっております。 なんと！本日発売です！
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
Google の新しいデザインガイドライン「Material Design」 | DevelopersIO
Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Ramotion/preview-transition: :octocat: PreviewTransition is a simple preview gallery UI controller with animated tranisitions. Swift UI library made by @Ramotion
Reusable Component UI Design
UX/UIデザイン - OHAKO | 企画～実装をご支援
