ftp.nice.ch/peanuts/GeneralData/Documents/NeXT/UIGuide.tar.gz#/UIGuide/8_GraphicDesign.rtf

This is 8_GraphicDesign.rtf in view mode; [Download] [Up]

Release 2.0  Copyright ©1991 by NeXT Computer, Inc.  All Rights Reserved.















Chapter 8
Conventions for Graphic Design









<<This chapter is mostly unwritten.  The proposed contents are listed below.>>


The NeXTstep Look
Color
Three-Dimensionality
	Bezels


Laying Out Windows and Panels
Window Size 
Window Placement 
Using Boxes
Using Split Views
Arranging Pop-Up Lists


Displaying Text
Displaying File Names


Designing Images
Application Icons
Document Icons
Button Images
	Highlight Images
Cursors
Other Graphics


Dimming Inactive Controls


Arranging Windows on the Screen





Laying Out Windows and Panels


<<Also see the Window and Panel chapters (Chapters 4 & 5) for discussions on window order, multiform panels, when panels should disappear, the position of attention panels, etc.>>


A substantial proportion of the window should be free of objects that respond to the first click.  It shouldn't be difficult for the user to find a place to click within the window to just select it.





Window Size


The only windows that have a fixed size are miniwindows and icons.  The initial size of all other windows is determined by the application.  Generally, standard windows are larger than panels and panels are larger than menus, but there are no fixed rules.





Window Placement


The user is free to rearrange windows on the screen, but the initial placement of windows is up to the application.  


To ensure a consistent user interface, all applications should follow these guidelines for locating windows:


·	When an application is launched, its main menu should appear in the upper left corner of the screen.  Users who prefer a different default location for the main menu can choose one with the Preferences application, and you may want to let users specify a preference just for your application.


·	Standard windows should come up to the right of the main menu, allowing enough room for submenus that might later be attached to the main menu.  Some applications also allow room for panels to come up to the left of the standard window and below the main menu.


·	Attention panels should come up in the center of the screen, where they won't be overlooked.


·	No part of any window (other than miniwindows and icons) should be placed off-screen.





Arranging Pop-Up Lists


When a panel includes a pop-up list, it's important to pay attention to the look of the panel when the list is on-screen.  Be sure, for example, that the list doesn't obscure any objects in the panel that provide a context for understanding the content of the list.  Also make sure that the open list doesn't blend in with the panel.  If an item in the list pops up alongside an object in the panel, it might lead users to interpret them in combination.





Displaying Text


Editable or selectable text (unless its a label or title) should be displayed against a white background; text that isn't selectable or editable should be displayed against a background other than white (usually gray).  The white background indicates that the text is selectable or editable; in certain contexts (a panel, for example), it also prompts for user input.


Selectable or editable text should normally be enclosed by a border of some kind to set it off from the background.


Labels and titles are displayed against a gray background without a border.  If they can be selected or edited, the background should turn white when the user first initiates a selection (i.e., on the first mouse-down event).


The text in a text field is normally editable, so it's displayed against a white background.  When the text field is temporarily disabled, the text becomes gray (just like the label of a button) but the background color doesn't change.





Displaying File Names


File names can be displayed in one of two ways.  Usually, the file's name should be displayed, followed by two spaces, an em dash, two more spaces, and then the directory path.  For example:


jobRecords  Ð  /Net/machine/home/records


However, when there's not much space to display the file nameÐas in a menu commandÐthe directory path can be shortened to the minimum necessary to differentiate the file name.  The part of the path that isn't shown should be replaced with ellipsis (...).  


For example, if one file called jobRecords is listed in limited space, it should be listed as:


jobRecords


If two files called jobRecords are listed in limited space, they might be listed as:


jobRecords  Ð  .../recordsjobRecords  Ð  .../backup








Designing Images 


<<You should use our images/cursors when appropriate>>





Application Icons


Freestanding and docked icons are the same size as miniwindows and have the same beveled border to make them look raised above the screen.  Each icon window displays the icon for an applicationÐan image that on the MegaPixel Display can be no more than 48 pixels high by 48 pixels wide, so that it can fit comfortably in the 64 pixel by 64 pixel window.


The docked icon for an application that isn't running displays the same image that represents the application in a directory window.  However, you can provide an icon for the application when it's running that's different from, but related to, the icon found in a directory window.

These are the contents of the former NiCE NeXT User Group NeXTSTEP/OpenStep software archive, currently hosted by Netfuture.ch.