Book - 網頁介面設計模式part1. 這本書中主要涵蓋以下六大原則

這本書中主要涵蓋以下六大原則. “Book - 網頁介面設計模式part1” is published by Y.J.L.. HomeNotificationsListsStoriesWriteBook-網頁介面設計模式part1這本書中主要涵蓋以下六大原則原則一：操作直接性包含「編輯」、「拖放」與「選取」的方式(1)頁內編輯：在user查看的頁面中直接進行變更，不離開該頁面根據該頁面所提供的編輯內容，而有不同的編輯呈現。

方式如下：單欄直接編輯、多欄直接編輯、覆蓋視窗編輯(overlayedit)、表格編輯、群組編輯、模組組態設定(ModuleConfiguration)。

//覆蓋視窗編輯(overlayedit)：適用於有日期、地點或其他明確資訊選項存在時的操作方式。

好處是可以避免太多的資訊擠壓在頁面上、使user可專注於選項上。

////群組編輯：很特別、也是我目前比較少看到的編輯方式，書中提到的是iPhone長按某一app的icon後，全部的icon都會鬆動，此時即可進行位置的改變或是刪除。

缺點是能見度低，但只要user知道後就會成為直覺操作。

////模組組態設定(ModuleConfiguration)：多用於入口網站，讓user可以調整頁面中顯示的模組，像在google搜尋頁面可以設定一頁中要顯示的數量、呈現內容等。

啟動與關閉的模式要盡量相同，若可變更項目多時，可考慮使用群組編輯。

//(2)拖放功能：拖放功能很方便，但要怎樣才能讓user了解這頁面可拖放？可拖放的是什麼？要拖放到哪？要如何才能看起來是具拖曳性的？1.PageLoad：互動開始前就先說明2.MouseOver3.MouseHover4.DragInitiated：滑鼠拖曳操作之後（通常指移動3像素後）5.DragLeavesOriginalLocation：物件被拉離原位置6.DragRe-EntersOriginalLocation7.DragEnterValidTarget8.DragExitsValidTarget9.DragExitsSpecificInvalidTarget10.DragIsOverNoSpecificTarget11.DragHoverOverValidTarget：如當拖曳至有效目標上停留時，會出現資料夾展開新區域，讓user可放入。

12.DragHoverOverInvalidTarget13.DropAccept14.DropReject15.DroponParentContainer可以整理成拖放設計的功能表「有趣的瞬間整理表」，許多網站會使用拖放模組的方式來呈現，像是將內容切分成各種區塊的個人網站或操作介面。

使用拖放功能時需要注意是不是佔用掉太多視覺空間、讓user太費力、介面不易懂，若有以上的顧慮，就可以調整成其他更適合的方式。

(3)直接選取：像是可以將桌面的物件直接拖拉至垃圾桶的操作方式1.雙態觸變選取(ToggleSelection)：核取方塊搭配控制項的選取方式，選取後會清楚的顯示選取數量，如gmail可選擇各項郵件，接著可點選刪除或是放進其他資料夾中，讓不連續的元件選取更容易。

選取的數目要讓user清楚，若user未點選任何一個，就必須即早提醒，像是讓user無法使用該功能，需要選擇後才可操作。

2.集合選取：雙態觸變選取時若跨頁則無法記憶，但集合選取則可記憶，方便user可以選擇最多的使用者，像是在社群軟體或是遊戲邀請發送時，通常可以勾選邀請所有聯絡人加入，若有不想要請的人，則可透過核取方塊去做調整。

這裏要注意若使用集合選取就必須要讓user清楚他所選取的數量，不管是該頁面的數量或是全部的數量，才不會進行功能操作時有所誤會！3.物件選取：可選取單一物件，選擇後會出現醒目的效果，也可透過鍵盤快捷鍵多項選取、或透過滑鼠拖曳的方式多項選擇。

4.混合觸變：同時使用雙態觸變&物件選取的方式，像是mail在勾選核取方塊後，會出現顯著的顏色，而後也可以有後續的動作，讓選取更準確。

原則二：保持輕質簡化操作步驟，讓互動變得更加輕質包含下列情境工具(ContextualTools)(1)情境內互動：讓內容即為互動，使操作與互動物件更具直接關連性。

(2)費茲定律：工具若越容易取得且夠大，使用所需要的時間越短，及提升與使用者的互動性，將工作至於情境，讓互動輕質化。

(3)情境工具：將功能融合欲內容當中。

1.永遠顯示工具：給user清楚的動作指令、顯示重要功能，使用時須減少畫面上的可見項目。

2.滑過顯示工具：滑過才顯示功能，若有額外的功能出現，就要特別注意「覆蓋視窗」是否會影響操作過程，也要避免讓user在滑過介面時才知道有此功能。

3.雙態觸變顯示工具：有個編輯見後，就可以編輯大量的資訊。

4.多層級工具：根據互動，「逐步顯示」可選用工具，有時也會出現功能表的選單。

盡可能避免多層結構。

5.副選單：通常需要點按右鍵MorefromY.J.LFollowServicePlanner/UXDesigner/LifeloverLovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableGetstartedY.J.L3FollowersServicePlanner/UXDesigner/LifeloverFollowRelated5TipsforWritingPerformanceReviewsPSC,Reflections,PerformanceReviews,whatevertheycallityougottadoit.Herearesometipsforyoutominimizethetimeyouspend.BlissApp:CaseStudyonMentalHealthCareOverviewBattlingmyProcastinationwithDesignthinkingShortcutstoshortcutsTowriteeveryday,Ineedideas.Andthethingwithmyideas,isthattheycancomeupanytime,anywhere.SowhenIhaveanidea,Ineed…HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable