UI flows の紹介

こんにちは、サイオステクノロジーの馬場です。

私は、アプリなどの UI 設計が好きで、それを仕事にしています。

まず、中心となる状況または概念を思い浮かべながら、
お気に入りのスケッチブックに、お気に入りのペンで落書きします。

この落書きによって、自分の脳内イメージが、自分の視覚を通じて、自分にフィードバックされます。

ぐるぐるフィードバックしているうちに、まとまってきた気がしたら、
チームにシェアしてフィードバックを得ます。

チーム内で共通イメージが見えてきた気がしたら、そのイメージを起点として、
今度は、純粋にロジカルに、UI (情報) のフローを展開・整理し始めます。

この記事では、この「フローの展開・整理」の際に、私が使っているツールを紹介します。

整理法 UI flows

まず、 UI flows と呼ばれる整理法があります。

A shorthand for designing UI flows:
https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows

( RoR の DHH を擁した 37signals の Signal v. Noise という有名ブログより )

上記ブログ記事を読めば、すぐ分かるほど簡単な話で、
「見るもの」と、それに対して「すること」のフロー、
まさにそれだけを書き出すためのシンプルな整理法です。

ランチ中に思いついたら、ナプキンに描けるくらいシンプルです。

 

ツール uiflow / guiflow

ランチ中ならナプキンに描いても良いのですが、自分のデスクに戻ったら、
そこからは、書きながら、考えながら、書きながら、考えながら … をやりたいですよね。

偉い人がそのためのツールを作ってくれています。

もう保守されない画面遷移図は嫌なので、
UI Flow図を簡単にマークダウンぽく書くエディタ作った:

https://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42

  • uiflow (コマンド) :
    • https://github.com/hirokidaichi/uiflow
    • 「マークダウンぽい」記法で書いたテキストファイルを、
      UI flows の画像ファイルに変換するコマンドです。
       
  • guiflow (その GUI 版) :

例えば、遷移の矢印の付け替えは、以下で済みます:

 

おすすめポイント

まず、整理法としての UI flows がシンプルであること。

その上で、ツール uiflow / guiflow のおすすめポイントは、以下です:

  • 絶妙に意味の通る「マークダウンぽい」記法のおかげで、
    テキストをパターンとして整理する作業 = リファクタリング がしやすい。
     
  • 当然バージョン管理できるし、差分をみれば変更の意味も分かる。
     
  • お気に入りのテキストエディタで書ける!!
    • 個人的には emacs + uiflows がベストなので、 guiflow は一切使ってません。
       

興味のある方は、ぜひ、試してみてください!!

 

蛇足

私の emacs の設定は以下です。

▼ ~/.emacs.d/init.el (に追記)

▼ uiflow-mode.el

この uiflow-mode.el は出典を見つけられなかったので、私が見よう見まねで書いたものかもしれません。

 

次回予告

また、そのうち、
お気に入りのツールを、誰も聞いてないし、誰もついて来なくても、マニアックに紹介する 
というフォーマットで書こうと思います。(=「◯◯の紹介」シリーズ)

 

>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

2人がこの投稿は役に立ったと言っています。

コメント投稿

メールアドレスは表示されません。


*