about 3 years ago

太常講了。乾脆寫成一篇...。主要是對 btn-danger 濃濃的不滿...=_=

Delete - Bad Pattern (Don't do it)

在 List 裡面列出 Delete Link

(這些 Example 只會讓使用者看到就想按一下而已)

在 List 裡面列出 Delete Button 並上色

(這根本提醒使用者趕快去按一下)

在 Show 裡面列出 Delete Button 放在「Edit Button 的旁邊」並上色

(太容易手滑按一下)

在文章列出「刪除 / 取消」行為並上色

(我好有衝動按一下)

Delete - Good Pattern

還是想放 List 裡面的話,用 Dropdown Menu 去作

把 Delete Button 搬到 Show / Edit 去作

(在 Show )

丟到「很難被順手按到」的角落,並以淺灰淺紅「字」的方式表示

(淺灰表示這不是常用 function,不希望你常按。刷淺紅表示這是重要危險功能)

   <%= ibutton('Delete This Post', edit_post_path(@post), :class=>"btn btn-small", :iclass => "icon icon-trash", :style => "font-weight: bold;background-color: #efefef; border-color: #e1e1e1; color:#cb7f7f;") %> 

(在 Edit )

其實還是儘量把 Delete 搬到 Edit 去作。在 Show 不是個好選擇..。放到右上角以淺灰淺紅「字」的方式表示

Form Cancel - Bad Pattern (Don't do it)


From Cancel - Good Pattern

  <div class="form-actions">

    <%= f.submit "Submit", :disable_with => 'Submiting...', :class => "btn btn-primary pull-left" %>
     <div style="margin-left: 10px;margin-top:7px" class="pull-left"> or <%= link_to("Cancel", "#", :style => "text-decoration:underline;") %></div>
  </div>
  

Modal Cancel - Bad Pattern (Don't do it)

(很容易順手按到)

Modal Cancel - Good Pattern

<div class="modal-footer">
  <a href="#cancel" class="btn btn-link muted pull-left" data-dismiss="modal">
    <span class="muted">Cancel</span>
  </a>
  <%= f.submit "Submit", :class => "btn btn-primary", :id => "submit_data" %>
</div>
← 談成長中 CMS 的 Scaling 之道 (2) [新書] Land Dream Rails Job →
 
comments powered by Disqus