こんにちは、投稿開発部の佐野大河(@sn_taiga)です。 先日、クックパッドのiOSアプリでレシピのエディタ画面をリニューアルしました。今日はそのUIデザインの設計についてお話します。 方針は「簡素化」 エディタ画面は、レシピを考えて記録・投稿する人にとって重要な機能の一つです。レシピには材料や作り方、料理写真、タイトル、紹介文などさまざまな項目があり、頭の中にある料理をこれらの形に落とし込んでいくのはなかなか大変な作業でもあります。なので、レシピを書く際の手間を減らし、ユーザーがストレスなくレシピを書けることを目的に「簡素化」という方針を定め、改善に取り組みました。具体的に行ったことは大きく以下の二つです。 1.入力や編集のステップを少なくする 以前のエディタ 新しいエディタ 以前のレシピエディタはひとつの項目を選択するとモーダルが開き、入力を終えたら元の画面へ戻ってくるウィジェット

iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー(Semi-Modal View)」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG(すなわちiOS 13対応版)からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少

こんにちは。iOS Developer(当時)のusagimaruです。 先日WWDC 2017が閉幕しましたが、グッドパッチでもデベロッパーを中心にWWDC報告会が開催されるなど、とても注目度が高いイベントでした。個人的には、リフレッシュレートの120Hz化によって今後UIやコンテンツがどのように変わるのか、UIKitレベルで統合されたドラッグ&ドロップによって体験がどのように変わるのか、HEVC/HEIFコーデックによってコンテンツはどこまで進化するのか、ARKitによってUIがどのように進化するのかが気になります。 WWDCで気になったデザイン系セッション さて、6月後半でそろそろWWDCの熱狂が落ち着いてきた頃合いだと思いますが、平熱に戻った今だからこそ改めてWWDCを振り返ってみたいと思いました。デベロッパーとしては、これからがある意味でWWDC本番なのかもしれません。今回も気に

冨樫 晃己 2013年入社。在学中にオークションサービス開発にサーバー担当として参加。入社後Amebaコミュニティサービスのサーバーサイドを複数担当し、2014年よりAWAでプロダクトマネジメントとインタラクション開発を担当。音楽配信サービスAWAのプロダクトマネジメントとインタラクティブアニメーションを担当している冨樫です。 今回はテクニカルクリエイター向けの記事を執筆する機会をいただいたため、AWAで行っているインタラクション開発を、技術部分に軽く踏み込んでまとめます。 MeaningfulAnimations まずAWAでは、インタラクションを開発するにあたり大切にしている考えがあります。 MeaningfulAnimations 一つ一つのアニメーションに対して、意味のあるものになるようにすることです。 MeaningfulAnimations にするにあたり、
こんにちは、エンジニアの遠藤です。 最近iQONアプリのホーム画面のデザインをリニューアルしました。 タブを使ったデザインにすることで、iQON内にある多くのコンテンツが見やすくなりました。 今回はこのタブ機能の実装についてざっくりと紹介しようと思います。 実装したものはライブラリーとしてGitHubに公開しているので、ぜひ使ってみてください!github.com 機能 今回実装した機能は下記の3つです 1. スワイプでページを無限に表示切り替え 2. タブは無限スクロール 3. タブをタップしたらタップした項目のページを表示 実装について 1. スワイプでページを無限に表示切り替え スワイプしたらページの表示を切り替えたいのでUIPageViewControllerを継承したTabPageViewControllerというクラスを実装しました。 今回は無限にページの表示切り替えをしたい

Yahoo! JAPAN MeetUp #2 (iOS) の時の発表資料です。 http://yj-meetup.connpass.com/event/38348/

こんにちは、買物情報事業部の三浦です。 日々アプリを使っていて、ふとしたところでさりげないアニメーションや気の利いた効果音があると心地よく感じますね。UIKitには手軽にアニメーションを実装できるようにAPIが用意されています。少し工夫するだけで効果的な動きを作ることができます。 サンプルを見ながらみていきましょう。 Basic まずはUIViewのクラスメソッドのシンプルなアニメーションです。 オブジェクトを下にアニメーションさせます。UIView.animateWithDuration( 0.5, delay: 0.0, options: nil,animations: { () -> Void in self.circle.center =CGPoint(x: 0, y: 100) }, completion: nil) 動きの加減をコントロールするイージングもUIViewA

1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く